Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/themesberg/flowbite-admin-dashboard
Free and open-source admin dashboard template built with Tailwind CSS and Flowbite
https://github.com/themesberg/flowbite-admin-dashboard
admin-dashboard charts css dashboard flowbite html hugo javascript tailwind tailwindcss webpack widget
Last synced: about 2 months ago
JSON representation
Free and open-source admin dashboard template built with Tailwind CSS and Flowbite
- Host: GitHub
- URL: https://github.com/themesberg/flowbite-admin-dashboard
- Owner: themesberg
- License: mit
- Created: 2023-01-09T15:52:21.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-05-15T02:47:54.000Z (4 months ago)
- Last Synced: 2024-07-23T05:49:11.120Z (about 2 months ago)
- Topics: admin-dashboard, charts, css, dashboard, flowbite, html, hugo, javascript, tailwind, tailwindcss, webpack, widget
- Language: HTML
- Homepage: https://flowbite-admin-dashboard.vercel.app
- Size: 6.45 MB
- Stars: 1,879
- Watchers: 29
- Forks: 458
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-tailwindcss - Flowbite Admin Dashboard - Open-source admin dashboard template built with Tailwind CSS and Flowbite. (UI Libraries, Components & Templates)
README
# [Flowbite Admin Dashboard](https://flowbite-admin-dashboard.vercel.app) [](https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Fthemesberg%2Fflowbite-admin-dashboard&text=Check%20out%20this%20open-source%20admin%20dashboard%20built%20with%20Flowbite%20and%20Tailwind%20CSS)
[](https://www.npmjs.com/package/flowbite-admin-dashboard)
[](LICENSE.md)
[](https://github.com/themesberg/flowbite-admin-dashboard/issues?q=is%3Aopen+is%3Aissue)
[](https://github.com/themesberg/flowbite-admin-dashboard/issues?q=is%3Aissue+is%3Aclosed)
[](https://flowbite-admin-dashboard.vercel.app/)
This project is a free and open-source UI admin dashboard template built with the components from [Flowbite](https://github.com/themesberg/flowbite) and based on the utility-first [Tailwind CSS](https://github.com/tailwindlabs/tailwindcss) 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](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/)
## Table of Contents
- [Flowbite Admin Dashboard ](#flowbite-admin-dashboard-)
- [๐ 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)
- [โ๏ธ Workflow](#๏ธ-workflow)
- [Table of Contents](#table-of-contents)
- [Demo pages](#demo-pages)
- [Quick start](#quick-start)
- [JavaScript Frameworks](#javascript-frameworks)
- [Back-end Frameworks](#back-end-frameworks)
- [File Structure](#file-structure)
- [Browser Support](#browser-support)
- [Resources](#resources)
- [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)
| --- | --- | --- |
| [](https://flowbite-admin-dashboard.vercel.app/) | [](https://flowbite-admin-dashboard.vercel.app/layouts/stacked/) | [](https://flowbite-admin-dashboard.vercel.app/crud/products/)
| Users (CRUD) | Settings | Pricing page
| --- | --- | --- |
| [](https://flowbite-admin-dashboard.vercel.app/crud/users/) | [](https://flowbite-admin-dashboard.vercel.app/settings/) | [](https://flowbite-admin-dashboard.vercel.app/pages/pricing/)
| Login page | Register page | Reset password
| --- | --- | --- |
| [](https://flowbite-admin-dashboard.vercel.app/authentication/sign-in/) | [](https://flowbite-admin-dashboard.vercel.app/authentication/sign-up/) | [](https://flowbite-admin-dashboard.vercel.app/authentication/reset-password/)
| Forgot password | Profile lock | Maintenance page
| --- | --- | --- |
| [](https://flowbite-admin-dashboard.vercel.app/authentication/forgot-password/) | [](https://flowbite-admin-dashboard.vercel.app/authentication/profile-lock/) | [](https://flowbite-admin-dashboard.vercel.app/pages/maintenance/)
| 404 not found | 500 server error | Playground
| --- | --- | --- |
| [](https://flowbite-admin-dashboard.vercel.app/pages/404/) | [](https://flowbite-admin-dashboard.vercel.app/pages/500/) | [](https://flowbite-admin-dashboard.vercel.app/playground/sidebar/)
- [Live Preview](https://flowbite-admin-dashboard.vercel.app/)
## 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.
Here's a list of compatible technologies and guides for Flowbite and Tailwind CSS:
### JavaScript Frameworks
The awesome open-source community also built and currently maintains the following standalone libraries for React, Vue, Svelte, and Angular:
- [๐ Flowbite React Library](https://github.com/themesberg/flowbite-react)
- [๐ Flowbite Vue Library](https://github.com/themesberg/flowbite-vue)
- [๐ธ Flowbite Svelte Library](https://github.com/themesberg/flowbite-svelte)
- [๐ Flowbite Angular Library](https://github.com/themesberg/flowbite-angular)
We also wrote integration guides for the following front-end frameworks and libraries:
- [๐ Flowbite with React guide](https://flowbite.com/docs/getting-started/react/)
- [๐ Flowbite with Next.js guide](https://flowbite.com/docs/getting-started/next-js/)
- [๐ Flowbite with Vue guide](https://flowbite.com/docs/getting-started/vue/)
- [๐ Flowbite with Nuxt.js guide](https://flowbite.com/docs/getting-started/nuxt-js/)
- [๐ Flowbite with Svelte guide](https://flowbite.com/docs/getting-started/svelte/)
### Back-end Frameworks
Flowbite has a great integration with most of the back-end frameworks because it relies on vanilla JavaScript:
- [๐ Using Flowbite with Laravel](https://flowbite.com/docs/getting-started/laravel/)
- [๐ Using Flowbite with Ruby on Rails 7](https://flowbite.com/docs/getting-started/rails/)
- [๐ธ Using Flowbite with Django](https://flowbite.com/docs/getting-started/django/)
- [๐ถ Using Flowbite with Flask](https://flowbite.com/docs/getting-started/flask/)
## 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
```
## Browser Support
At present, we officially aim to support the last two versions of the following browsers:
## Resources
- Live preview:
- Flowbite documentation:
- Tailwind CSS documentation:
- License Agreement:
- Issues: [Github Issues Page](https://github.com/themesberg/flowbite-admin-dashboard/issues)
## 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:
1. Make sure that you are using the latest version of Flowbite Admin Dashboard. Check the CHANGELOG from your dashboard on the [GitHub releases page](https://github.com/themesberg/flowbite-admin-dashboard/releases).
2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed.
3. 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](https://flowbite.com/contact/) instead of opening an issue.
## 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)