Salvia-kit Dashboard v8
Salvia-kit dashboard is a professional dashboard built with Tailwind CSS. We took advantage of Tailwind's flexibility to create a fully customizable premium dashboard, with documentation designed by a developer for developers. Feel free to customize everything to suit your needs.
Documentation
Features
- Support of the active route (styled by default).
- Fully customizable and without external dependencies.
- No vendor lock-in, you can export it and integrate it in your project.
- Sidenav aligned left or right according to your preferences (on mobile).
File Structure
File Structure explained
We will focus ondashboardfolder and itssubfolders which contain all the logic.
contains theDashboardProvidercomponent where all the dashboard logic is placed. this will then be reused in other components. it handles the closing of the sidenav when the route changes or on click outside.
displays an overlay that will only be visible on small screens to emphasize the focus on the sidenav when it is open
As eachsidenav-sectionhas an icon, this sub-folder contains the icons of each sidenav-item. You don't need this folder if you are using a package for icons such asreact-icons,font-awesomeor other
contains theAccordioncomponent which is used to toggle each section of sidenav.
It's in this file that you will add routes for each sidenav-item. it is an array of objects.
[
{
section : 'Apps',
icon: <AllAppsIcon />,
content: [
{
title: 'All Apps',
link: '/admin/all-apps'
},
{
title: 'Updates',
link: '/admin/updates'
},
]
},
]
- title : text that indicate the route
- icon : the icon, imported fromicons folder or from your library
- link : name of the route
TheSidenavHeadercomponent contains the logo that is displayed on top of the sidenav
ThisSidenavItemscomponent automatically generates each sidenav-item according to your routes coming from thedata.jsfile
ThisSidenavigationcomponent contains all the logic of the sidenav.
This style sheet is used to make the scrollbar invisible for the sidenav.
Contains theTopnavigationcomponent. You can customize it or replace it with your own navbar but don't forget to add a button to toggle sidenav on mobile
How it works ?
- Add your routes in thedashboard/sidenavigation/data.jsfile
- If your routes don't exist yet, create your routes in thepagesdirectory
- Wrap theapp.jswith theDashboardLayoutcomponent
Auto Format and Linting
Export
As there is no vendor lock-in, if you already have a dashboard, you can just copy the small configuration fromtailwind.config.jsand paste it into yourtailwind.config.jsconfiguration file. then copy thedashboardfolder into your project
- Add your routes in thedashboard/sidenavigation/data.jsfile
- Replace your layout by theDashboardLayoutcomponent
Customization
You can customize everything according to your preferences if it doesn't suit you. What we have done is just provide a solid structure for better scalability and readability of the code.
The sidenav scrollbar is hidden by default but you can èvvstill scroll with the keyboards if you have several sidenav-items. If you are not a fan of this approach, you can always change its style in thestyle.module.cssfile
In the dashboard/layout.js file, theSidenavigation component has as propmobilePosition, which indicates the positioning of the sidenav on mobile.
This prop can have two possible values :
- left : sidenav will be aligned to the left
- right : sidenav will be aligned to the right
Components
If you'll need some UI components for Tailwind CSS such as modal, accordion, dropdown, tab or other components, you can check outKimia-UI, a collection of fully customizable UI components, without any installation, just copy and paste the component you want to use.
Documentation
Features
- Support of the active route (styled by default).
- Fully customizable and without external dependencies.
- No vendor lock-in, you can export it and integrate it in your project.
- Sidenav aligned left or right according to your preferences (on mobile).
File Structure
File Structure explained
We will focus ondashboardfolder and itssubfolders which contain all the logic.
contains theDashboardProvidercomponent where all the dashboard logic is placed. this will then be reused in other components. it handles the closing of the sidenav when the route changes or on click outside.
displays an overlay that will only be visible on small screens to emphasize the focus on the sidenav when it is open
As eachsidenav-sectionhas an icon, this sub-folder contains the icons of each sidenav-item. You don't need this folder if you are using a package for icons such asreact-icons,font-awesomeor other
contains theAccordioncomponent which is used to toggle each section of sidenav.
It's in this file that you will add routes for each sidenav-item. it is an array of objects.
[
{
section : 'Apps',
icon: <AllAppsIcon />,
content: [
{
title: 'All Apps',
link: '/admin/all-apps'
},
{
title: 'Updates',
link: '/admin/updates'
},
]
},
]
- title : text that indicate the route
- icon : the icon, imported fromicons folder or from your library
- link : name of the route
TheSidenavHeadercomponent contains the logo that is displayed on top of the sidenav
ThisSidenavItemscomponent automatically generates each sidenav-item according to your routes coming from thedata.jsfile
ThisSidenavigationcomponent contains all the logic of the sidenav.
This style sheet is used to make the scrollbar invisible for the sidenav.
Contains theTopnavigationcomponent. You can customize it or replace it with your own navbar but don't forget to add a button to toggle sidenav on mobile
How it works ?
- Add your routes in thedashboard/sidenavigation/data.jsfile
- If your routes don't exist yet, create your routes in thepagesdirectory
- Wrap thepages/_app.jswith theDashboardLayoutcomponent
Auto Format and Linting
Export
As there is no vendor lock-in, if you already have a dashboard, you can just copy the small configuration fromtailwind.config.jsand paste it into yourtailwind.config.jsconfiguration file. then copy thedashboardfolder into your project
- Add your routes in thedashboard/sidenavigation/data.jsfile
- Replace your layout by theDashboardLayoutcomponent
Customization
You can customize everything according to your preferences if it doesn't suit you. What we have done is just provide a solid structure for better scalability and readability of the code.
The sidenav scrollbar is hidden by default but you can èvvstill scroll with the keyboards if you have several sidenav-items. If you are not a fan of this approach, you can always change its style in thestyle.module.cssfile
In the dashboard/layout.js file, theSidenavigation component has as propmobilePosition, which indicates the positioning of the sidenav on mobile.
This prop can have two possible values :
- left : sidenav will be aligned to the left
- right : sidenav will be aligned to the right
Components
If you'll need some UI components for Tailwind CSS such as modal, accordion, dropdown, tab or other components, you can check outKimia-UI, a collection of fully customizable UI components, without any installation, just copy and paste the component you want to use.
Documentation
Features
- Support of the active route (styled by default).
- Fully customizable and without external dependencies.
- No vendor lock-in, you can export it and integrate it in your project.
- Sidenav aligned left or right according to your preferences (on mobile).
File Structure
File Structure explained
We will focus on dashboard folder and its subfolders which contain all the logic.
contains thedashboard-provider component where all the dashboard logic is placed. this will then be reused in other components. it handles the closing of the sidenav when the route changes or on click outside.
displays an overlay that will only be visible on small screens to emphasize the focus on the sidenav when it is open
contains the Accordion component which is used to toggle each section of sidenav.
As each sidenav-item has an icon, this sub-folder contains the icons of each sidenav-item. You don't need this folder if you are using a package for icons such asfont-awesomeor other
The sidenav-header component contains the logo that is displayed on top of the sidenav
Contains the sidenav-item component which represents each item of the sidenav.
Contains thesidenav-items-sectioncomponent which represents each section of the sidenav.
This sidenav-items component contains the sidenav-item component
<Accordion>
<template #item>
<document-icon /> <span class="pl-3">Documents</span>
</template>
<template #panel>
<sidenav-item title="Taxes" to="/documents/taxes" />
<sidenav-item title="Travel" to="/documents/travel" />
<sidenav-item title="Insurance" to="/documents/insurance" />
</template>
</Accordion>
- template #item : contains the name of the section
- template #panel : content of the accordion (sidenav-item)
- Props :
- title : text that indicate the route
- to : name of the route
This side-navigation component contains all the logic of the sidenav.
Contains the top-navigation component. You can customize it or replace it with your own navbar but don't forget to add a button to toggle sidenav on mobile
How it works ?
- Add your routes and items in thedashboard/sidenavigation/items.vuefile
- If your routes don't exist yet, create your routes in thepages directory
- Wrap theApp.vueby thedashboard-layout component
Auto Format and Linting
Export
As there is no vendor lock-in, if you already have a dashboard, you can just copy the small configuration fromtailwind.config.js and paste it into your tailwind.config.js configuration file. then copy the dashboard folder into your project
- Add your routes and items in thedashboard/sidenavigation/Items.vuefile
- Replace your layout by thedashboard-layout component
Customization
You can customize everything according to your preferences if it doesn't suit you. What we have done is just provide a solid structure for better scalability and readability of the code.
The sidenav scrollbar is hidden by default but you can still scroll with the keyboards if you have several sidenav-items. If you are not a fan of this approach, you can always change its style in thedashboard/sidenavigation/Index.vuefile
In the dashboard/Layout.vue file, theside-navigation component has a propmobile-position, which indicates the positioning of the sidenav on mobile.
This prop can have two possible values :
- left : sidenav will be aligned to the left
- right : sidenav will be aligned to the right
Documentation
Features
- Support of the active route (styled by default).
- Fully customizable and without external dependencies.
- No vendor lock-in, you can export it and integrate it in your project.
- Sidenav aligned left or right according to your preferences (on mobile).
File Structure
File Structure explained
We will focus on dashboard folder and its subfolders which contain all the logic.
contains thedashboard-provider component where all the dashboard logic is placed. this will then be reused in other components. it handles the closing of the sidenav when the route changes or on click outside.
displays an overlay that will only be visible on small screens to emphasize the focus on the sidenav when it is open
contains the Accordion component which is used to toggle each section of sidenav.
As each sidenav-item has an icon, this sub-folder contains the icons of each sidenav-item. You don't need this folder if you are using a package for icons such asfont-awesomeor other
The sidenav-header component contains the logo that is displayed on top of the sidenav
Contains the sidenav-item component which represents each item of the sidenav.
Contains thesidenav-items-sectioncomponent which represents each section of the sidenav.
This sidenav-items component contains the sidenav-item component
<Accordion>
<template #item>
<document-icon /> <span class="pl-3">Documents</span>
</template>
<template #panel>
<sidenav-item title="Taxes" to="/documents/taxes" />
<sidenav-item title="Travel" to="/documents/travel" />
<sidenav-item title="Insurance" to="/documents/insurance" />
</template>
</Accordion>
- template #item : contains the name of the section
- template #panel : content of the accordion (sidenav-item)
- Props :
- title : text that indicate the route
- to : name of the route
This side-navigation component contains all the logic of the sidenav.
Contains the top-navigation component. You can customize it or replace it with your own navbar but don't forget to add a button to toggle sidenav on mobile
How it works ?
- Add your routes and items in thedashboard/sidenavigation/items.vuefile
- If your routes don't exist yet, create your routes in thepages directory
- Wrap theApp.vueby thedashboard-layout component
Auto Format and Linting
Export
As there is no vendor lock-in, if you already have a dashboard, you can just copy the small configuration fromtailwind.config.js and paste it into your tailwind.config.js configuration file. then copy the dashboard folder into your project
- Add your routes and items in thedashboard/sidenavigation/Items.vuefile
- Replace your layout by thedashboard-layout component
Customization
You can customize everything according to your preferences if it doesn't suit you. What we have done is just provide a solid structure for better scalability and readability of the code.
The sidenav scrollbar is hidden by default but you can still scroll with the keyboards if you have several sidenav-items. If you are not a fan of this approach, you can always change its style in thedashboard/sidenavigation/Index.vuefile
In the dashboard/Layout.vue file, theside-navigation component has a propmobile-position, which indicates the positioning of the sidenav on mobile.
This prop can have two possible values :
- left : sidenav will be aligned to the left
- right : sidenav will be aligned to the right
Documentation
Features
- Support of the active route (styled by default).
- Fully customizable and without external dependencies.
- No vendor lock-in, you can export it and integrate it in your project.
- Sidenav aligned left or right according to your preferences (on mobile).
File Structure
File Structure explained
We will focus ondashboardfolder and itssubfolders which contain all the logic.
handle click outside to the target
displays an overlay that will only be visible on small screens to emphasize the focus on the sidenav when it is open
the global store to toggle sidenav state
As eachsidenav-sectionhas an icon, this sub-folder contains the icons of each sidenav-item. You don't need this folder if you are using a package for icons such asfont-awesomeor others
contains theCollapsecomponent which is used to toggle each section of sidenav.
It's in this file that you will add routes for each sidenav-item. it is an array of objects.
[
{
section : 'Apps',
icon: <AllAppsIcon />,
content: [
{
title: 'All Apps',
link: '/admin/all-apps'
},
{
title: 'Updates',
link: '/admin/updates'
},
]
},
]
- title : text that indicate the route
- icon : the icon, imported fromicons folder or from your library
- link : name of the route
TheSidenavHeadercomponent contains the logo that is displayed on top of the sidenav
ThisSidenavItemscomponent automatically generates each sidenav-item according to your routes coming from thedata.jsfile
ThisSidenavigationcomponent contains all the logic of the sidenav.
Contains theTopnavigationcomponent. You can customize it or replace it with your own navbar but don't forget to add a button to toggle sidenav on mobile
How it works ?
- Add your routes in thedashboard/sidenavigation/data.jsfile
- If your routes don't exist yet, create your routes in theroutesdirectory
- Wraproutes/__layout.sveltewith theDashboardLayoutcomponent
Auto Format and Linting
Export
As there is no vendor lock-in, if you already have a dashboard, you can just copy the small configuration fromtailwind.config.cjsand paste it into yourtailwind.config.cjsconfiguration file. then copy thedashboardfolder into your project
- Add your routes in thedashboard/sidenavigation/data.jsfile
- Replace your layout by theDashboardLayoutcomponent
Customization
You can customize everything according to your preferences if it doesn't suit you. What we have done is just provide a solid structure for better scalability and readability of the code.
The sidenav scrollbar is hidden by default but you can still scroll with the keyboards if you have several sidenav-items. If you are not a fan of this approach, you can always change its style in thedashboard/sidenavigation/Index.sveltefile
In the dashboard/Layout.svelte file,Sidenavigation component has a propmobilePosition, which indicates the positioning of the sidenav on mobile.
This prop can have two possible values :
- left : sidenav will be aligned to the left
- right : sidenav will be aligned to the right