Dashlite is a simple React-based dashboard template built with a focus on speed and lightweight performance. This project uses Tailwind CSS, Heroicons, and Recharts as the core UI foundation, and leverages React Suspense & Lazy for component loading optimization.
- Flexible Sidebar & Navbar (navigation data, titles, and actions can be passed externally).
- Automatic breadcrumbs based on URL.
- Loader spinner for loading states.
- Alert with enter & exit animations.
- Ready-to-use pages:
- Dashboard (demo chart using Recharts).
- Users (table with pagination, search, and filters).
- Settings (theme, font size, API name, maintenance mode).
- Account (admin profile, email, username, forgot password).
- Notifications (list with mark-as-read).
- HTTP Response Status Code.
- Forgot Password.
- React
- Tailwind CSS
- Heroicons
- Recharts
- React Router (navigation)
- Suspense & React.lazy (code splitting)
This project uses a hybrid folder structure combining the Atomic Design pattern with a modular architecture
src/
├── modules/
│ ├── auth/ # Feature for auth pages
│ └── dashboard/ # Feature for dashboard pages
├── pages/ # Pages (Dashboard, Users, Settings, etc.)
├── routes/ # Main routing
├── shared/ # Global components
├── types/ # Global types
├── utils/ # Global utils
├── App.tsx
└── index.tsx
-
Clone the repo:
git clone https://github.com/Daffabot/dashlite.git cd dashlite -
Install dependencies:
npm install
yarn install
-
Start the development server:
npm run dev
yarn dev
-
Open in your browser:
http://localhost:5173 -
Login with this accounts:
-
Role: user
email:
[email protected] -
Role: admin
email:
[email protected] -
Role: owner
email:
[email protected]
all password accounts is
123456 -
This project is released under the MIT License. You are free to use, modify, and distribute it as needed.
Contributions are very welcome — whether adding new features, fixing bugs, or improving performance. Feel free to open an issue or submit a pull request.