Show: Open-source admin dashboard with Tailwind CSS and Flowbite
Tags: showdev, tailwindcss, opensource, flowbite
Published: 2023-01-17 11:11:38

Hey developers 👋

Me and my friends from the Flowbite community built an [open-source admin dashboard](https://github.com/themesberg/flowbite-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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rfmmi37e5hzsh8avfzrx.png)](https://flowbite-admin-dashboard.vercel.app/)

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](https://flowbite.com/) 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](https://flowbite.com/figma/).

## 📚 Flowbite documentation

If you want to use this project we recommend to also [study the component library](https://flowbite.com/docs/getting-started/introduction/) 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:

- Tailwind CSS: [tailwindcss.com](https://tailwindcss.com/)
- Flowbite: [flowbite.com](http://flowbite.com/)
- HUGO [gohugo.io](https://gohugo.io/documentation/)
- Webpack [webpack.js.org](https://webpack.js.org/)

## 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
```

4. Create a local server on `localhost:1313` by running the following command:

```
npm run start
```

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

```
npm run build
```

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
```

## Licensing

- Copyright 2019-2023 Bergside Inc. (https://flowbite.com)
- Open-source under the [MIT License](https://github.com/themesberg/flowbite-admin-dashboard/blob/main/LICENSE)

## Useful Links

- 📚 [Flowbite Library](https://flowbite.com/) - Open-source components built with Tailwind CSS
- 🎨 [Flowbite Figma](https://flowbite.com/figma/) - Design system built for Figma
- 🧱 [Flowbite Blocks](https://flowbite.com/blocks/) - Building sections for website and applications
- 💎 [Flowbite Pro](https://flowbite.com/pro/) - A larger collection of the open-source version of the latter three

## Authors

- [Zoltán Szőgyényi](https://twitter.com/zoltanszogyenyi)
- [Robert Tanislav](https://twitter.com/roberttanislav)