HugoHTMLAdmin dashboard

flowbite-admin-dashboard — Hugo Admin dashboard Template

By themesberg

A free and open-source admin dashboard template built with Tailwind CSS and the Flowbite component library, using Hugo to generate static pages, offering 15 example pages covering dashboards, CRUD layouts, authentication pages, and error pages.

Open Source SiteDownload Source ZIP

Explore the design

Compare the page layouts and mobile experience. Open any screenshot for a closer look.

3 previews
Desktop homepage1 / 3
Desktop captureTop of page

Actual screenshot captured by the server browser.

All pages & views 3

Screenshots show visual appearance; interactive behavior may differ.

Recorded 2026-10-02View source

What stands out

A quick read of the recorded project description.

01

Built with Tailwind CSS utility classes and the Flowbite component library, with interactive components including navbar, modals, drawers, and tooltips

02

Provides 15 example pages covering dashboards, CRUD, settings, pricing, authentication, and error pages

03

Uses Hugo to generate static pages, with a build process combining Webpack and PostCSS

04

Charts use ApexCharts and are styled according to the Flowbite design system

05

The repository provides actual screenshots of desktop and mobile home pages and CRUD inner pages

06

Licensed under MIT, allowing free use, modification, commercial use, and distribution of this version of the code

Template Details

Flowbite Admin Dashboard is a free and open-source admin dashboard template maintained by themesberg, with code hosted on GitHub under the MIT license. The template is based on Tailwind CSS utility classes, with interactive components (navbar, modals, drawers, tooltips, etc.) from the Flowbite component library. Charts use the third-party ApexCharts library and are styled with Tailwind CSS classes.

The project uses Hugo as the static site generator, with a build process involving Webpack and PostCSS, and dependencies managed via npm. The README states that dependencies can be installed with npm install, a local development server can be started on port 1313 with npm run start, and the build output can be generated to the public directory with npm run build. It can also be deployed to Vercel using the default Hugo configuration, or the layouts can be copied into frontend stacks such as React, Vue, Next.js, and Nuxt.js, as well as backend frameworks like Laravel, Django, Flask, and Rails.

The template includes 15 example pages: two dashboard home layouts, two CRUD pages for products and users, a settings page, a pricing page, authentication pages (sign in, sign up, reset password, forgot password, lock profile), and 404, 500, and maintenance pages. The repository also provides desktop and mobile screenshots of the home page and screenshots of the product CRUD inner pages, which can be used to assess page structure and responsive behavior.

Usage limitations: This template is a static UI template; the README does not state built-in backend, database, or real authentication logic, and the CRUD pages are interface examples. The MIT license covers the repository code; third-party assets such as demo images, fonts, and icons must be checked against their respective licenses. External services such as domains, hosting, and databases may incur separate charges.

HugoHTMLAdmin

Is it right for your project?

Use Cases

  • Building static page prototypes for admin management systems to quickly validate dashboard and data table layouts
  • Using ready-made admin page structures and Tailwind CSS styles directly in Hugo projects
  • Copying layouts into frontend stacks such as React, Vue, Next.js, and Nuxt.js as a UI foundation
  • Preparing admin-side page templates for backend framework projects like Laravel, Django, Flask, and Rails
  • Referencing its authentication and error page designs to complete login, registration, and exception state pages for management systems

Suitable For

  • Developers who need to quickly build admin interface prototypes
  • Frontend projects using Hugo or the Tailwind CSS stack
  • Teams looking to migrate ready-made admin layouts to their own frameworks
  • Projects that need CRUD, authentication, and error page examples as a starting point

Getting started & customization

Use these recorded setup notes alongside the repository instructions for your chosen version.

  1. 1

    Node.js and npm must be installed first, then run npm install to install dependencies from package.json

  2. 2

    Run npm run start to launch a local development server at localhost:1313

  3. 3

    Run npm run build to output the build artifacts to the public directory

  4. 4

    Optionally deploy using Vercel's default Hugo configuration, or copy the layouts to other stacks

  5. 5

    Third-party assets such as demo images, fonts, and icons must be checked separately for their licenses; they cannot be judged solely based on the code's MIT license

Read repository instructions

License & source material

Usage conditions & limitations

Free to use · keep license notice

This entry covers the free version in the public repository under the MIT license; the free scope applies to this version's code and does not mean external services or third-party assets are free.

Must comply with when using

  • Free use, modification, commercial use, and distribution of this version of the code are permitted.
  • When distributing copies or substantial portions of the code, retain the original author's copyright notice and the full MIT license notice.
  • The code is provided as is; warranties and limitations of liability are governed by the original license and applicable law.

Additional costs & items to verify

  • The code is open-sourced under the MIT license, allowing free use, modification, commercial use, and distribution, but copyright and license notices must be retained.
  • Flowbite Pro is a paid, larger component collection and is an optional upgrade not included in this free template.
  • Advanced components such as charts come from third-party libraries like ApexCharts, whose licenses and usage conditions must be checked separately and are not granted along with this repository's MIT license.
  • The template is a static UI layout; the README does not provide backend, database, or real authentication logic, and the CRUD and authentication pages are interface examples only.
  • Demo images, fonts, icons, and other third-party assets must be checked against their respective licenses and cannot be judged solely based on the code's MIT license.
  • External services such as domains, hosting, databases, payments, or AI may incur additional charges.
View Original Text Basis

Permission is hereby granted, free of charge

Original License Text

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

Original README

💎 [Flowbite Pro](https://flowbite.com/pro/) - A larger collection of the open-source version of the latter three

Original README

This admin dashboard contains many advanced components both from Flowbite but also from other third-party libraries such as ApexCharts

Original README

you can also just copy the layouts from this project inside your own tech stack

Original README
https://github.com/themesberg/flowbite-admin-dashboard/blob/main/LICENSEhttps://github.com/themesberg/flowbite-admin-dashboard/blob/main/README.md

Compiled by DeepSeek based on repository license and README ·2026-10-02. Results only cover the materials read; dependencies, images, fonts, and subsequent term changes are subject to their respective original texts.

Project checks & description sources

Template Information

Source platforms
GitHub
Documentation and maintenance reference score
More documented · 94 / 100
Technologies
Hugo · HTML
Website type
Admin dashboard
How this score is calculated

Our heuristic uses license records (up to 30), a demo link (12), a preview (10), stars (15), recorded maintenance (15), description completeness (8), feature records (5) and classification data (5). It is not a code, security or performance test, or a Google score. A link does not establish tested functionality.

What to verify for this project

Repository update recorded
2025-03-20
Screenshot last checked
2026-10-02

A demo link is listed. Check it with your own content and viewport sizes; its presence does not confirm that forms, authentication or payments work.

The catalog identifies Hugo as the primary stack. Check the actual dependency manifest and lockfile for versions and hosting requirements. These notes use recorded metadata, not a code audit or a deployment test.

Use a selection guide →

How this description was prepared

AI-assisted description based on catalog records and repository material. Repository authors are not automatically the reviewers of this description.

Automatically checked against source and license rules; no manual editorial review.

Inspect the recorded source material

SHA-256: 3c8542d95b0258603852b9598cf22d5740287a35a1a3852e222f756fbabdab07

2026-10-02T07:11:26.471Z

Source file / repository
# [Flowbite Admin Dashboard](https://flowbite-admin-dashboard.vercel.app) [![Tweet](https://img.shields.io/twitter/url/http/shields.io.svg?style=social&logo=twitter)](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)

[![version](https://img.shields.io/npm/v/flowbite-admin-dashboard)](https://www.npmjs.com/package/flowbite-admin-dashboard)
[![license](https://img.shields.io/badge/license-MIT-blue.svg)](LICENSE.md)
[![GitHub issues open](https://img.shields.io/github/issues/themesberg/flowbite-admin-dashboard.svg)](https://github.com/themesberg/flowbite-admin-dashboard/issues?q=is%3Aopen+is%3Aissue)
[![GitHub issues closed](https://img.shields.io/github/issues-closed-raw/themesberg/flowbite-admin-dashboard.svg)](https://github.com/themesberg/flowbite-admin-dashboard/issues?q=is%3Aissue+is%3Aclosed)

[![Flowbite Admin Dashboard Live Preview](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/flowbite-admin-dashboard-preview.png)](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)
| --- | --- | --- |
| [![Dashboard](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/github/homepage.jpg)](https://flowbite-admin-dashboard.vercel.app/) | [![Stacked Layout](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/github/stacked.jpg)](https://flowbite-admin-dashboard.vercel.app/layouts/stacked/) | [![Products (CRUD)](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/github/products-crud.jpg)](https://flowbite-admin-dashboard.vercel.app/crud/products/)

| Users (CRUD) | Settings | Pricing page
| --- | --- | --- |
| [![Users (CRUD)](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/github/users.jpg)](https://flowbite-admin-dashboard.vercel.app/crud/users/) | [![Settings](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/github/settings.jpg)](https://flowbite-admin-dashboard.vercel.app/settings/) | [![Pricing page](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/github/pricing.jpg)](https://flowbite-admin-dashboard.vercel.app/pages/pricing/)

| Login page | Register page | Reset password
| --- | --- | --- |
| [![Login page](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/github/login.jpg)](https://flowbite-admin-dashboard.vercel.app/authentication/sign-in/) | [![Register page](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/github/register.jpg)](https://flowbite-admin-dashboard.vercel.app/authentication/sign-up/) | [![Reset password](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/github/reset-password.jpg)](https://flowbite-admin-dashboard.vercel.app/authentication/reset-password/)

| Forgot password | Profile lock | Maintenance page
| --- | --- | --- |
| [![Forgot password](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/github/forgot-password.jpg)](https://flowbite-admin-dashboard.vercel.app/authentication/forgot-password/) | [![Profile lock](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/github/profile-lock.jpg)](https://flowbite-admin-dashboard.vercel.app/authentication/profile-lock/) | [![Maintenance page](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/github/maintenance.jpg)](https://flowbite-admin-dashboard.vercel.app/pages/maintenance/)

| 404 not found | 500 server error | Playground
| --- | --- | --- |
| [![404 not found](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/github/404.jpg)](https://flowbite-admin-dashboard.vercel.app/pages/404/) | [![500 server error](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/github/500.jpg)](https://flowbite-admin-dashboard.vercel.app/pages/500/) | [![Playground](https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/github/playground.jpg)](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:

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

## Resources

- Live preview: <https://flowbite-admin-dashboard.vercel.app/>
- Flowbite documentation: <https://flowbite.com/docs/getting-started/introduction/>
- Tailwind CSS documentation: <https://tailwindcss.com/>
- License Agreement: <https://flowbite.com/docs/getting-started/license/>
- 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)
Report a correction

Explore similar templates

Compare previews and descriptions within the same stack and category.

AdminLTE

AdminLTE

AdminLTE is a free, open-source admin dashboard template built on Bootstrap 5 and vanilla JavaScript, with no jQuery dependency.

Astro · Admin dashboard

ngx-admin

ngx-admin

ngx-admin is an Angular admin dashboard template maintained by Akveo, built on the Nebular component library and released under the MIT license.

Angular · Admin dashboard

gentelella

gentelella

Gentelella v4 is a free, open-source admin dashboard template maintained by Colorlib, built with vanilla JavaScript, SCSS, and Vite 8 without Bootstrap or jQuery.

HTML · Admin dashboard

coreui-free-bootstrap-admin-template

coreui-free-bootstrap-admin-template

A free Bootstrap admin template maintained by CoreUI, built on CoreUI's own UI component library. It provides compiled HTML pages and Pug template source code, covering dashboards, authentication, forms, components, icons, and error pages.

HTML · Admin dashboard

dashboards

dashboards

A collection of responsive dashboard HTML templates open-sourced by Keen IO, built on CSS Grid, offering multiple prebuilt admin data interface layouts.

HTML · Admin dashboard

SB Admin 2

SB Admin 2

SB Admin 2 is a classic Bootstrap admin template from Start Bootstrap, offering dashboards, charts, tables, and common management pages.

HTML · Admin dashboard