This project is a free and open-source UI admin dashboard template built with the components from Flowbite and based on the utility-first Tailwind CSS framework featuring charts, tables, widgets, CRUD layouts, modals, drawers, and more.
This admin dashboard can quickly help you get started building an application for your project using the newest UI/UX development technologies in the open-source area including Tailwind CSS and Flowbite.
---
## Table of Contents
Click to expand
- [Table of Contents](#table-of-contents)
- [πΉ Demo pages](#-demo-pages)
- [π Built with Flowbite](#-built-with-flowbite)
- [π¨ Tailwind CSS utility classes](#-tailwind-css-utility-classes)
- [π 15 example pages](#-15-example-pages)
- [𧱠Advanced components](#-advanced-components)
- [π Flowbite documentation](#-flowbite-documentation)
- [π¨βπ Development](#-development)
- [βοΈ Workflow](#οΈ-workflow)
- [π Quick start](#-quick-start)
- [Project Structure](#project-structure)
- [π Tools](#-tools)
- [Browser Support](#browser-support)
- [Resources](#resources)
- [JavaScript Frameworks](#javascript-frameworks)
- [Back-end Frameworks](#back-end-frameworks)
- [Reporting Issues](#reporting-issues)
- [Technical Support or Questions](#technical-support-or-questions)
- [Licensing](#licensing)
- [Useful Links](#useful-links)
- [Authors](#authors)
---
## πΉ Demo pages
| Dashboard | Stacked Layout | Products (CRUD) |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [![Dashboard](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/github/homepage.jpg)](http://themesberg.github.io/flowbite-astro-admin-dashboard/) | [![Stacked Layout](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/github/stacked.jpg)](http://themesberg.github.io/flowbite-astro-admin-dashboard/layouts/stacked/) | [![Products (CRUD)](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/github/products-crud.jpg)](http://themesberg.github.io/flowbite-astro-admin-dashboard/crud/products/) |
| Users (CRUD) | Settings | Pricing page |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [![Users (CRUD)](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/github/users.jpg)](http://themesberg.github.io/flowbite-astro-admin-dashboard/crud/users/) | [![Settings](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/github/settings.jpg)](http://themesberg.github.io/flowbite-astro-admin-dashboard/settings/) | [![Pricing page](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/github/pricing.jpg)](http://themesberg.github.io/flowbite-astro-admin-dashboard/pages/pricing/) |
| Login page | Register page | Reset password |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [![Login page](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/github/login.jpg)](http://themesberg.github.io/flowbite-astro-admin-dashboard/authentication/sign-in/) | [![Register page](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/github/register.jpg)](http://themesberg.github.io/flowbite-astro-admin-dashboard/authentication/sign-up/) | [![Reset password](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/github/reset-password.jpg)](http://themesberg.github.io/flowbite-astro-admin-dashboard/authentication/reset-password/) |
| Forgot password | Profile lock | Maintenance page |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [![Forgot password](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/github/forgot-password.jpg)](http://themesberg.github.io/flowbite-astro-admin-dashboard/authentication/forgot-password/) | [![Profile lock](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/github/profile-lock.jpg)](http://themesberg.github.io/flowbite-astro-admin-dashboard/authentication/profile-lock/) | [![Maintenance page](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/github/maintenance.jpg)](http://themesberg.github.io/flowbite-astro-admin-dashboard/pages/maintenance/) |
| 404 not found | 500 server error | Playground |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [![404 not found](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/github/404.jpg)](http://themesberg.github.io/flowbite-astro-admin-dashboard/pages/404/) | [![500 server error](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/github/500.jpg)](http://themesberg.github.io/flowbite-astro-admin-dashboard/pages/500/) | [![Playground](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/github/playground.jpg)](http://themesberg.github.io/flowbite-astro-admin-dashboard/playground/sidebar/) |
- [Live Preview](http://themesberg.github.io/flowbite-astro-admin-dashboard/)
π Built with Flowbite
The interactive components such as the navbars, modals, drawers, and tooltips are all based on the popular open-source component library called Flowbite which enables us to use these elements by creating more complex set of pages and widgets inside a fully-fledged admin dashboard template.
π¨ Tailwind CSS utility classes
All of the pages, widgets, and components are solely based on the utility-first classes from Tailwind CSS and it is compatible with the latest v3.x
of the technology by automatically purging all of the classes based on the template paths.
π 15 example pages
Get started with 15 advanced examples pages including two different layouts of a dashboard's homepage full of charts widgets, tables, datepickers, and statistics and also with two CRUD layout pages for products, users, a settings page, authentication pages for login and register and even custom 404 and 500 error pages.
𧱠Advanced components
This admin dashboard contains many advanced components both from Flowbite but also from other third-party libraries such as ApexCharts which have been customly tailored with Tailwind CSS classes and designed based on the Flowbite Design System.
π Flowbite documentation
If you want to use this project we recommend to also study the component library that we used to build this dashboard because you can use even more components from that library to enhance the examples that we've coded here already.
π¨βπ Development
βοΈ Workflow
This product is built using the following widely used technologies:
π Quick start
- Clone this repository or download the ZIP file
- Make sure that you have Node.js and NPM, PNPM or Yarn installed
- Install the project dependencies from the
package.json
file:
pnpm install
# or
npm install
# or
yarn
PNPM is the package manager of choice for illustration, but you can use what you want.
- Launch the Astro local development server on
localhost:2121
by running the following command:
pnpm run dev
You can also build the project and get the distribution files inside the dist/
folder by running:
pnpm run build
Then, you can preview the generated build with a local web server:
pnpm run preview
For deployment, see the GitHub workflow, where you can plug your target (pre-configured for GitHub pages).
See docs.astro.build/en/guides/deploy
Website is configured for static deployment, but you can flip it to Server-Side rendering by simply
uncommenting output: "server"
in the ./astro.config.mjs
.
Project Structure
After cloning this repository, you'll find the following (simplified) structure:
π¬
βββ π§ data
β βββ **/*.json # Satic data sources for REST etc.
β
βββ src
β
βββ 𧱠app
β βββ **/*.astro # Application-wide components
β
βββ π assets
β βββ **/*.{svg,β¦} # Transformable assets
β
βββ 𧱠components
β βββ **/*.astro # Simple, atomic UI elements
β
βββ π lib
β βββ **/*.ts # Utilities (Databases, APIsβ¦)
β
βββ 𧱠modules
β βββ **/*.astro # Complex views made of elements
β
βββ π pages
β βββ **/*.astro # File-based client routes
β β
β βββ π api
β βββ [...entities].ts # Catch-all endpoint for CRUD ops.
β
βββ π services
β βββ *.ts # Server-side CRUD operations
β
βββ π types
βββ *.ts # Data entities typings
π Tools
Efforts have been put on fast onboarding and developer experience.
This project comes with extensive support for TypeScript, Astro, Tailwind, and VS Code.
It is configured with sensible defaults, a bit of opinions, plus some tricks to make it plays nice together.
- TypeScript: strictest Astro's settings. Full-stack, type-safe code base
- ESLint: featuring
astro-eslint-parser
+ eslint-plugin-astro
- Prettier: featuring
prettier-plugin-astro
(bundled with astro
)
- Editorconfig: conforming with prettier
- VS Code: extensions recommendations, tooling settings
- Tailwind: Astro integration (using Vite and PostCSS)
- Flowbite: dependencies (core, typography), settings
- GitHub: a pre-configured workflow for deployment (using PNPM cache)
- Sandboxes: project is tested against and fully compatible with web containers
Feel free to hack those settings to cater for your own needs.
Browser Support
At present, we officially aim to support the last two versions of the following browsers:
Resources
JavaScript Frameworks
Here's a list of compatible technologies and guides for Flowbite and Tailwind CSS:
The awesome open-source community also built and currently maintains the following standalone libraries for React, Vue, Svelte, and Angular:
We also wrote integration guides for the following front-end frameworks and libraries:
Back-end Frameworks
Flowbite has a great integration with most of the back-end frameworks because it relies on vanilla JavaScript:
Reporting Issues
We use GitHub Issues as the official bug tracker for Flowbite Admin Dashboard. Here are some advices for our users that want to report an issue:
- Make sure that you are using the latest version of Flowbite Admin Dashboard. Check the CHANGELOG from your dashboard on the GitHub releases page.
- Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
- Some issues may be browser specific, so specifying in what browser you encountered the issue might help.
Technical Support or Questions
If you have questions or need help integrating the product please contact us instead of opening an issue.
Licensing
Useful Links
Authors