DEV Community

Cover image for Show: Open-source admin dashboard with Tailwind CSS and Flowbite
Zoltรกn Szล‘gyรฉnyi for Themesberg

Posted on

Show: Open-source admin dashboard with Tailwind CSS and Flowbite

Hey developers ๐Ÿ‘‹

Me and my friends from the Flowbite community built an open-source admin dashboard template featuring charts, widgets, modals, CRUD layouts, drawers, popovers, and more and it's licensed under the MIT license!

Flowbite Admin Dashboard Preview

You're free to use it in your next project if you're a fan of Tailwind CSS and/or Flowbite. I'll try to describe what we built in the next few lines and also the technologies that have been involved. Cheers!

๐ŸŒ€ 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.

โš™๏ธ Workflow

This product is built using the following widely used technologies:

Quick start

  1. Clone this repository or download the ZIP file
  2. Make sure that you have Node.js and NPM installed
  3. Install the project dependencies from the package.json file:


npm install


Enter fullscreen mode Exit fullscreen mode
  1. Create a local server on localhost:1313 by running the following command:


npm run start


Enter fullscreen mode Exit fullscreen mode

You can also build the project and get the distribution files inside the public/ folder by running:



npm run build


Enter fullscreen mode Exit fullscreen mode

You can instantly upload your project to Vercel by selecting the default HUGO configuration, but depending on your own tech stack whether it's React.js, Vue, Nuxt.js, Next.js or a back-end framework you can also just copy the layouts from this project inside your own tech stack.

File Structure

Within the download you'll find the following directories and files:



Flowbite Admin Dashboard
.
โ”œโ”€โ”€ LICENSE
โ”œโ”€โ”€ README.md
โ”œโ”€โ”€ config.yml
โ”œโ”€โ”€ content
โ”œโ”€โ”€ data
โ”œโ”€โ”€ layouts
โ”œโ”€โ”€ node_modules
โ”œโ”€โ”€ package-lock.json
โ”œโ”€โ”€ package.json
โ”œโ”€โ”€ postcss.config.js
โ”œโ”€โ”€ resources
โ”œโ”€โ”€ src
โ”œโ”€โ”€ static
โ”œโ”€โ”€ tailwind.config.js
โ”œโ”€โ”€ webpack.config.js
โ””โ”€โ”€ yarn.lock

Enter fullscreen mode Exit fullscreen mode




Licensing

Useful Links

  • ๐Ÿ“š Flowbite Library - Open-source components built with Tailwind CSS
  • ๐ŸŽจ Flowbite Figma - Design system built for Figma
  • ๐Ÿงฑ Flowbite Blocks - Building sections for website and applications
  • ๐Ÿ’Ž Flowbite Pro - A larger collection of the open-source version of the latter three

Authors

Top comments (0)