Salvia-kit Dashboard v9
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 explained
We will focus ondashboardfolder and itssubfolderswhich contain all the logic.
contains theDashboardProvidercomponent where all the dashboard logic is placed. this will then be reused in other components. it handles the opening and closing of the modal. Also when the route changes.
As eachsection of data has an icon, this sub-folder contains the icons of each section. You don't need this folder if you are using a package for icons such asreact-icons,font-awesomeor other. it also contains a subfoldersystemwhich contains all system icons used in all the application
It's in this file that you will add your routes. it is an array of objects.
[
{
section : 'Messages',
icon: <MessagesIcon />,
content: [
{
title: 'Archived',
link: '/messages/archived'
},
{
title: 'Unread',
link: '/messages/unread'
},
]
},
]
- section : Name of the section
- icon : the icon, imported fromicons folder or from your library
- title : text that indicate the route
- link : name of the route
Contains the modal used to show windows menu or to show content of each section of Taskbar
Contains a constant namedOFFICE.This constant is a link that represents the desktop. For example if the home page is your desktop, no content will be displayed on that page, only the desktop.
If you have nested layout or if you want to change your desktop link... For example if your back-office entry point is/admin/dashboard, you can update the value ofOFFICEby giving it the route of your back-office entry point.
Display the Taskbar on bottom.
Display the Topbar when route is notOFFICE. The topbar displays the name of the route and a closing icon. when you click on that closing icon, you will be redirected to theOFFICE.
Display the start menu when you click on windows icon. The start menu displays each section with his content.
How it works ?
- Add your routes in thedashboard/office/data.jsfile
- If your routes don't exist yet, create your routes in thepagesdirectory
- Wrap your routes inapp.jsby theDashboardLayoutcomponent
Auto Format and Linting
Customization
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. You'll also need to install@reach/portal which allows to create and append a DOM node to the end of document.body and renders a React tree into it. it is useful in this case because we have many modal to renders.
- Add your routes in thedashboard/office/data.jsfile
- Replace your layout by theDashboardLayoutcomponent
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 explained
We will focus ondashboardfolder and itssubfolderswhich contain all the logic.
contains theDashboardProvidercomponent where all the dashboard logic is placed. this will then be reused in other components. it handles the opening and closing of the modal. Also when the route changes.
As eachsection of data has an icon, this sub-folder contains the icons of each section. You don't need this folder if you are using a package for icons such asreact-icons,font-awesomeor other. it also contains a subfoldersystemwhich contains all system icons used in all the application
It's in this file that you will add your routes. it is an array of objects.
[
{
section : 'Messages',
icon: <MessagesIcon />,
content: [
{
title: 'Archived',
link: '/messages/archived'
},
{
title: 'Unread',
link: '/messages/unread'
},
]
},
]
- section : Name of the section
- icon : the icon, imported fromicons folder or from your library
- title : text that indicate the route
- link : name of the route
Contains the modal used to show windows menu or to show content of each section of Taskbar
Contains a constant namedOFFICE.This constant is a link that represents the desktop. For example if the home page is your desktop, no content will be displayed on that page, only the desktop.
If you have nested layout or if you want to change your desktop link... For example if your back-office entry point is/admin/dashboard, you can update the value ofOFFICEby giving it the route of your back-office entry point.
Display the Taskbar on bottom.
Display the Topbar when route is notOFFICE. The topbar displays the name of the route and a closing icon. when you click on that closing icon, you will be redirected to theOFFICE.
Display the start menu when you click on windows icon. The start menu displays each section with his content.
How it works ?
- Add your routes in thedashboard/office/data.jsfile
- If your routes don't exist yet, create your routes in thepagesdirectory
- Wrap your/pages/_app.jswith theDashboardLayoutcomponent
Auto Format and Linting
Customization
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. You'll also need to install@reach/portal which allows to create and append a DOM node to the end of document.body and renders a React tree into it. it is useful in this case because we have many modal to renders.
- Add your routes in thedashboard/office/data.jsfile
- Replace your layout by theDashboardLayoutcomponent
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.