Deploy to Netlify
Flowbite Astro Admin Dashboard
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.
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 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 UI 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 template was built with Astro, Flowbite and Tailwind CSS.
- 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
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 Astro's deployment docs for more details.
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.
For more information on how to get started and what tools were you please check out the official repository on GitHub.
