|
1 | | -# tb-flowbite-admin-dashboard |
| 1 | +# [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) |
| 2 | + |
| 3 | +[](https://www.npmjs.com/package/flowbite-admin-dashboard) |
| 4 | +[](LICENSE.md) |
| 5 | +[](https://github.com/themesberg/flowbite-admin-dashboard/issues?q=is%3Aopen+is%3Aissue) |
| 6 | +[](https://github.com/themesberg/flowbite-admin-dashboard/issues?q=is%3Aissue+is%3Aclosed) |
| 7 | + |
| 8 | +[](https://flowbite-admin-dashboard.vercel.app/) |
| 9 | + |
| 10 | +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. |
| 11 | + |
| 12 | +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. |
| 13 | + |
| 14 | +## 🌀 Built with Flowbite |
| 15 | + |
| 16 | +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. |
| 17 | + |
| 18 | +## 💨 Tailwind CSS utility classes |
| 19 | + |
| 20 | +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. |
| 21 | + |
| 22 | +## 📊 15 example pages |
| 23 | + |
| 24 | +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. |
| 25 | + |
| 26 | +## 🧱 Advanced components |
| 27 | + |
| 28 | +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/). |
| 29 | + |
| 30 | +## 📚 Flowbite documentation |
| 31 | + |
| 32 | +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. |
| 33 | + |
| 34 | +## ⚙️ Workflow |
| 35 | + |
| 36 | +This product is built using the following widely used technologies: |
| 37 | + |
| 38 | +- Tailwind CSS: [tailwindcss.com](https://tailwindcss.com/) |
| 39 | +- Flowbite: [flowbite.com](http://flowbite.com/) |
| 40 | +- HUGO [gohugo.io](https://gohugo.io/documentation/) |
| 41 | +- Webpack [webpack.js.org](https://webpack.js.org/) |
| 42 | + |
| 43 | +## Table of Contents |
| 44 | + |
| 45 | +- [Flowbite Admin Dashboard ](#flowbite-admin-dashboard-) |
| 46 | + - [🌀 Built with Flowbite](#-built-with-flowbite) |
| 47 | + - [💨 Tailwind CSS utility classes](#-tailwind-css-utility-classes) |
| 48 | + - [📊 15 example pages](#-15-example-pages) |
| 49 | + - [🧱 Advanced components](#-advanced-components) |
| 50 | + - [📚 Flowbite documentation](#-flowbite-documentation) |
| 51 | + - [⚙️ Workflow](#️-workflow) |
| 52 | + - [Table of Contents](#table-of-contents) |
| 53 | + - [Demo pages](#demo-pages) |
| 54 | + - [Quick start](#quick-start) |
| 55 | + - [JavaScript Frameworks](#javascript-frameworks) |
| 56 | + - [Back-end Frameworks](#back-end-frameworks) |
| 57 | + - [File Structure](#file-structure) |
| 58 | + - [Browser Support](#browser-support) |
| 59 | + - [Resources](#resources) |
| 60 | + - [Reporting Issues](#reporting-issues) |
| 61 | + - [Technical Support or Questions](#technical-support-or-questions) |
| 62 | + - [Licensing](#licensing) |
| 63 | + - [Useful Links](#useful-links) |
| 64 | + - [Authors](#authors) |
| 65 | + |
| 66 | +## Demo pages |
| 67 | + |
| 68 | +| Dashboard | Stacked Layout | Products (CRUD) |
| 69 | +| --- | --- | --- | |
| 70 | +| [](https://flowbite-admin-dashboard.vercel.app/) | [](https://flowbite-admin-dashboard.vercel.app/layouts/stacked/) | [](https://flowbite-admin-dashboard.vercel.app/crud/products/) |
| 71 | + |
| 72 | +| Users (CRUD) | Settings | Pricing page |
| 73 | +| --- | --- | --- | |
| 74 | +| [](https://flowbite-admin-dashboard.vercel.app/crud/users/) | [](https://flowbite-admin-dashboard.vercel.app/settings/) | [](https://flowbite-admin-dashboard.vercel.app/pages/pricing/) |
| 75 | + |
| 76 | +| Login page | Register page | Reset password |
| 77 | +| --- | --- | --- | |
| 78 | +| [](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/) |
| 79 | + |
| 80 | +| Forgot password | Profile lock | Maintenance page |
| 81 | +| --- | --- | --- | |
| 82 | +| [](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/) |
| 83 | + |
| 84 | +| 404 not found | 500 server error | Playground |
| 85 | +| --- | --- | --- | |
| 86 | +| [](https://flowbite-admin-dashboard.vercel.app/pages/404/) | [](https://flowbite-admin-dashboard.vercel.app/pages/500/) | [](https://flowbite-admin-dashboard.vercel.app/playground/sidebar/) |
| 87 | + |
| 88 | +- [Live Preview](https://flowbite-admin-dashboard.vercel.app/) |
| 89 | + |
| 90 | +## Quick start |
| 91 | + |
| 92 | +1. Clone this repository or download the ZIP file |
| 93 | +2. Make sure that you have Node.js and NPM installed |
| 94 | +3. Install the project dependencies from the `package.json` file: |
| 95 | + |
| 96 | +``` |
| 97 | +npm install |
| 98 | +``` |
| 99 | + |
| 100 | +4. Create a local server on `localhost:1313` by running the following command: |
| 101 | + |
| 102 | +``` |
| 103 | +npm run start |
| 104 | +``` |
| 105 | + |
| 106 | +You can also build the project and get the distribution files inside the `public/` folder by running: |
| 107 | + |
| 108 | +``` |
| 109 | +npm run build |
| 110 | +``` |
| 111 | + |
| 112 | +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. |
| 113 | + |
| 114 | +Here's a list of compatible technologies and guides for Flowbite and Tailwind CSS: |
| 115 | + |
| 116 | +### JavaScript Frameworks |
| 117 | + |
| 118 | +The awesome open-source community also built and currently maintains the following standalone libraries for React, Vue, Svelte, and Angular: |
| 119 | + |
| 120 | +- [🌀 Flowbite React Library](https://github.com/themesberg/flowbite-react) |
| 121 | +- [🍀 Flowbite Vue Library](https://github.com/themesberg/flowbite-vue) |
| 122 | +- [🎸 Flowbite Svelte Library](https://github.com/themesberg/flowbite-svelte) |
| 123 | +- [📕 Flowbite Angular Library](https://github.com/themesberg/flowbite-angular) |
| 124 | + |
| 125 | +We also wrote integration guides for the following front-end frameworks and libraries: |
| 126 | + |
| 127 | +- [📝 Flowbite with React guide](https://flowbite.com/docs/getting-started/react/) |
| 128 | +- [📝 Flowbite with Next.js guide](https://flowbite.com/docs/getting-started/next-js/) |
| 129 | +- [📝 Flowbite with Vue guide](https://flowbite.com/docs/getting-started/vue/) |
| 130 | +- [📝 Flowbite with Nuxt.js guide](https://flowbite.com/docs/getting-started/nuxt-js/) |
| 131 | +- [📝 Flowbite with Svelte guide](https://flowbite.com/docs/getting-started/svelte/) |
| 132 | + |
| 133 | +### Back-end Frameworks |
| 134 | + |
| 135 | +Flowbite has a great integration with most of the back-end frameworks because it relies on vanilla JavaScript: |
| 136 | + |
| 137 | +- [📚 Using Flowbite with Laravel](https://flowbite.com/docs/getting-started/laravel/) |
| 138 | +- [🚊 Using Flowbite with Ruby on Rails 7](https://flowbite.com/docs/getting-started/rails/) |
| 139 | +- [🐸 Using Flowbite with Django](https://flowbite.com/docs/getting-started/django/) |
| 140 | +- [🌶 Using Flowbite with Flask](https://flowbite.com/docs/getting-started/flask/) |
| 141 | + |
| 142 | +## File Structure |
| 143 | + |
| 144 | +Within the download you'll find the following directories and files: |
| 145 | + |
| 146 | +``` |
| 147 | +Flowbite Admin Dashboard |
| 148 | +. |
| 149 | +├── LICENSE |
| 150 | +├── README.md |
| 151 | +├── config.yml |
| 152 | +├── content |
| 153 | +├── data |
| 154 | +├── layouts |
| 155 | +├── node_modules |
| 156 | +├── package-lock.json |
| 157 | +├── package.json |
| 158 | +├── postcss.config.js |
| 159 | +├── resources |
| 160 | +├── src |
| 161 | +├── static |
| 162 | +├── tailwind.config.js |
| 163 | +├── webpack.config.js |
| 164 | +└── yarn.lock |
| 165 | +``` |
| 166 | + |
| 167 | +## Browser Support |
| 168 | + |
| 169 | +At present, we officially aim to support the last two versions of the following browsers: |
| 170 | + |
| 171 | +<img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/chrome.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/firefox.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/edge.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/safari.png" width="64" height="64"> <img src="https://s3.amazonaws.com/creativetim_bucket/github/browser/opera.png" width="64" height="64"> |
| 172 | + |
| 173 | +## Resources |
| 174 | + |
| 175 | +- Live preview: <https://flowbite-admin-dashboard.vercel.app/> |
| 176 | +- Flowbite documentation: <https://flowbite.com/docs/getting-started/introduction/> |
| 177 | +- Tailwind CSS documentation: <https://tailwindcss.com/> |
| 178 | +- License Agreement: <https://flowbite.com/docs/getting-started/license/> |
| 179 | +- Issues: [Github Issues Page](https://github.com/themesberg/flowbite-admin-dashboard/issues) |
| 180 | + |
| 181 | +## Reporting Issues |
| 182 | + |
| 183 | +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: |
| 184 | + |
| 185 | +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). |
| 186 | +2. Providing us reproducible steps for the issue will shorten the time it takes for it to be fixed. |
| 187 | +3. Some issues may be browser specific, so specifying in what browser you encountered the issue might help. |
| 188 | + |
| 189 | +## Technical Support or Questions |
| 190 | + |
| 191 | +If you have questions or need help integrating the product please [contact us](https://flowbite.com/contact/) instead of opening an issue. |
| 192 | + |
| 193 | +## Licensing |
| 194 | + |
| 195 | +- Copyright 2019-2023 Bergside Inc. (https://flowbite.com) |
| 196 | +- Open-source under the [MIT License](https://github.com/themesberg/flowbite-admin-dashboard/blob/main/LICENSE) |
| 197 | + |
| 198 | +## Useful Links |
| 199 | + |
| 200 | +- 📚 [Flowbite Library](https://flowbite.com/) - Open-source components built with Tailwind CSS |
| 201 | +- 🎨 [Flowbite Figma](https://flowbite.com/figma/) - Design system built for Figma |
| 202 | +- 🧱 [Flowbite Blocks](https://flowbite.com/blocks/) - Building sections for website and applications |
| 203 | +- 💎 [Flowbite Pro](https://flowbite.com/pro/) - A larger collection of the open-source version of the latter three |
| 204 | + |
| 205 | +## Authors |
| 206 | + |
| 207 | +- [Zoltán Szőgyényi](https://twitter.com/zoltanszogyenyi) |
| 208 | +- [Robert Tanislav](https://twitter.com/roberttanislav) |
0 commit comments