使用 Astro 构建，界面组件来自 Flowbite，样式基于 Tailwind CSS 原子类
Astro后台
flowbite-astro-admin-dashboard — Astro 后台模板
作者 themesberg
基于 Astro、Flowbite 与 Tailwind CSS 构建的免费开源后台管理面板模板，包含图表、表格、CRUD 布局、弹窗与抽屉等示例页面。
看看你的网站会是什么样
浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。
全部页面与视图 3
截图用于了解视觉与布局，交互效果请以实际项目为准。
采集于 2026-10-02查看来源
值得关注的模板亮点
从已有项目资料中，快速了解它的特点。
提供仪表盘、堆叠布局、产品与用户 CRUD、设置、定价等示例页面
包含图表、表格、小组件、弹窗与抽屉等后台常用界面元素
附带登录、注册、重置密码、忘记密码、锁定资料、维护页、404 与 500 等认证和状态页面
以 MIT 许可发布，可免费使用、修改、商用和分发该版本代码
模板详细介绍
这是一个免费开源的后台管理面板 UI 模板，使用 Astro 作为站点框架，界面组件来自 Flowbite，样式基于 Tailwind CSS 的原子类。模板提供仪表盘、堆叠布局、产品与用户 CRUD 页面、设置页、定价页，以及登录、注册、重置密码、忘记密码、锁定资料、维护页、404 与 500 等示例页面，并包含图表、表格、小组件、弹窗和抽屉等界面元素。
仓库以 MIT 许可发布，可免费使用、修改、商用和分发该版本代码，分发时需保留版权声明与完整 MIT 许可声明。代码按现状提供。演示图片、字体、图标等第三方素材需按各自许可单独核对，域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
模板定位为前端界面起点，不包含后端业务逻辑或数据持久化实现；CRUD 页面为界面示例，接入真实数据需要自行补充服务端与接口。
Astro后台
适合你的项目吗？
适用场景
- 为内部管理工具或 SaaS 后台搭建前端界面骨架
- 在 Astro 项目中复用 Flowbite 与 Tailwind CSS 的后台组件与页面布局
- 作为学习 Astro 与 Tailwind CSS 组合开发后台界面的参考示例
- 快速演示仪表盘、CRUD 列表与认证流程等后台常见页面形态
适合人群
- 需要现成后台 UI 模板以缩短前端搭建时间的开发者
- 使用 Astro 或 Tailwind CSS 技术栈的团队
- 希望参考 Flowbite 组件在后台场景中组织方式的开发者
上手与定制指南
结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。
- 1
仓库提供 StackBlitz 与 CodeSandbox 在线打开入口，可在浏览器中直接查看项目
- 2
本地开发需按 README 的 Quick start 与 Workflow 说明安装依赖并启动
- 3
CRUD 等页面为界面示例，接入真实数据需自行实现服务端与接口
- 4
演示图片、字体、图标等第三方素材需按各自许可单独核对
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供；担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- README 中提及 Flowbite Pro 为更大规模的付费集合，属于可选的付费升级内容，免费版本不包含 Pro 组件与区块。
- Flowbite 组件库另有独立的许可协议页面，使用其组件时需同时遵守该协议，与仓库自身的 MIT 许可并存。
- 模板设计基于 Flowbite 设计系统，Figma 设计资源可能受单独条款约束，需自行核对。
- 图表等部分组件来自 ApexCharts 等第三方库，这些库有各自的许可，需单独核对。
- 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
Flowbite Pro
README 原文
License Agreement: <https://flowbite.com/docs/getting-started/license/>
README 原文
based on the [Flowbite Design System](https://flowbite.com/figma/)
README 原文
https://github.com/themesberg/flowbite-astro-admin-dashboard/blob/main/LICENSEhttps://github.com/themesberg/flowbite-astro-admin-dashboard/blob/main/README.mdfrom other third-party libraries such as ApexCharts
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-02。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料较完整 · 76 / 100
- 技术栈
- Astro
- 网站类型
- 后台
这个分数如何计算
本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2023-12-09
- 截图检查日期
- 2026-10-02
已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 Astro。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。
查看当时使用的来源资料
SHA-256: edd868348754a104f7924323bb8b2374ffe6775e691599be2b6de833e5695baf
2026-10-02T07:12:33.569Z
来源文件 / 仓库# [Flowbite Astro Admin Dashboard](https://themesberg.github.io/flowbite-astro-admin-dashboard/) [](https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Fthemesberg%2Fflowbite-astro-admin-dashboard&text=Check%20out%20this%20open-source%20admin%20dashboard%20built%20with%20Flowbite%2C%20Astro%20and%20Tailwind%20CSS)
<!-- NOTE: This is a Tailwind in MD experiment, to make it nice when rendered with Astro -->
<div align="center" class="flex flex-wrap justify-evenly w-full">
<a href="https://github.com/themesberg/flowbite-astro-admin-dashboard"><img src="https://img.shields.io/badge/version-v1.0.2-blue" alt="version"></a>
<a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-blue.svg" alt="license"></a>
<a href="https://github.com/themesberg/flowbite-admin-dashboard/issues?q=is%3Aopen+is%3Aissue"><img src="https://img.shields.io/github/issues/themesberg/flowbite-astro-admin-dashboard.svg" alt="GitHub issues open"></a>
<a href="https://github.com/themesberg/flowbite-admin-dashboard/issues?q=is%3Aissue+is%3Aclosed"><img src="https://img.shields.io/github/issues-closed-raw/themesberg/flowbite-astro-admin-dashboard.svg" alt="GitHub issues closed"></a>
</div>
<a class="hidden" href="https://themesberg.github.io/flowbite-astro-admin-dashboard/"><img class="w-full rounded-md overflow-hidden" src="https://flowbite.s3.amazonaws.com/templates/flowbite-admin-dashboard/flowbite-admin-dashboard-preview.png" alt="Flowbite Admin Dashboard Live Preview"></a>
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.
---
<div align="center" class="flex flex-wrap justify-evenly w-full my-16">
<a href="https://stackblitz.com/github/themesberg/flowbite-astro-admin-dashboard"><img src="https://developer.stackblitz.com/img/open_in_stackblitz.svg" alt="Open in StackBlitz"></a>
<a href="https://codesandbox.io/p/github/themesberg/flowbite-astro-admin-dashboard/main"><img src="https://assets.codesandbox.io/github/button-edit-lime.svg" alt="Open with CodeSandbox"></a>
</div>
<div class="hidden">
---
## Table of Contents
<details><summary>Click to expand</summary>
- [Table of Contents](#table-of-contents)
- [🕹 Demo pages](#-demo-pages)
- [🌀 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)
- [👨🚀 Development](#-development)
- [⚙️ Workflow](#️-workflow)
- [🚀 Quick start](#-quick-start)
- [Project Structure](#project-structure)
- [🛠 Tools](#-tools)
- [Browser Support](#browser-support)
- [Resources](#resources)
- [JavaScript Frameworks](#javascript-frameworks)
- [Back-end Frameworks](#back-end-frameworks)
- [Reporting Issues](#reporting-issues)
- [Technical Support or Questions](#technical-support-or-questions)
- [Licensing](#licensing)
- [Useful Links](#useful-links)
- [Authors](#authors)
</details>
---
</div>
<div class="hidden">
## 🕹 Demo pages
| Dashboard | Stacked Layout | Products (CRUD) |
| --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [](http://themesberg.github.io/flowbite-astro-admin-dashboard/) | [](http://themesberg.github.io/flowbite-astro-admin-dashboard/layouts/stacked/) | [](http://themesberg.github.io/flowbite-astro-admin-dashboard/crud/products/) |
| Users (CRUD) | Settings | Pricing page |
| -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [](http://themesberg.github.io/flowbite-astro-admin-dashboard/crud/users/) | [](http://themesberg.github.io/flowbite-astro-admin-dashboard/settings/) | [](http://themesberg.github.io/flowbite-astro-admin-dashboard/pages/pricing/) |
| Login page | Register page | Reset password |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [](http://themesberg.github.io/flowbite-astro-admin-dashboard/authentication/sign-in/) | [](http://themesberg.github.io/flowbite-astro-admin-dashboard/authentication/sign-up/) | [](http://themesberg.github.io/flowbite-astro-admin-dashboard/authentication/reset-password/) |
| Forgot password | Profile lock | Maintenance page |
| ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [](http://themesberg.github.io/flowbite-astro-admin-dashboard/authentication/forgot-password/) | [](http://themesberg.github.io/flowbite-astro-admin-dashboard/authentication/profile-lock/) | [](http://themesberg.github.io/flowbite-astro-admin-dashboard/pages/maintenance/) |
| 404 not found | 500 server error | Playground |
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| [](http://themesberg.github.io/flowbite-astro-admin-dashboard/pages/404/) | [](http://themesberg.github.io/flowbite-astro-admin-dashboard/pages/500/) | [](http://themesberg.github.io/flowbite-astro-admin-dashboard/playground/sidebar/) |
- [Live Preview](http://themesberg.github.io/flowbite-astro-admin-dashboard/)
</div>
## 🌀 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.
## 👨🚀 Development
### ⚙️ Workflow
This product is built using the following widely used technologies:
- Tailwind CSS: [tailwindcss.com](https://tailwindcss.com/)
- Flowbite: [flowbite.com](http://flowbite.com/)
- Astro: [astro.build](https://astro.build/)
### 🚀 Quick start
1. Clone this repository or download the ZIP file
2. Make sure that you have **Node.js** and NPM, PNPM or Yarn installed
3. Install the project dependencies from the `package.json` file:
```sh
pnpm install
# or
npm install
# or
yarn
```
_PNPM is the package manager of choice for illustration, but you can use what you want._
1. Launch the Astro local development server on `localhost:2121` by running the following command:
```sh
pnpm run dev
```
You can also build the project and get the distribution files inside the `dist/` folder by running:
```sh
pnpm run build
```
Then, you can preview the generated build with a local web server:
```sh
pnpm run preview
```
For deployment, see the GitHub workflow, where you can plug your target (pre-configured for GitHub pages).
See [docs.astro.build/en/guides/deploy](https://docs.astro.build/en/guides/deploy)
Website is configured for static deployment, but you can flip it to **Server-Side rendering** by simply
uncommenting `output: "server"` in the `./astro.config.mjs`.
---
### Project Structure
After cloning this repository, you'll find the following (simplified) structure:
```sh
🛬
├── 💧 data
│ └── **/*.json # Satic data sources for REST etc.
│
└── src
│
├── 🧱 app
│ └── **/*.astro # Application-wide components
│
├── 🌠 assets
│ └── **/*.{svg,…} # Transformable assets
│
├── 🧱 components
│ └── **/*.astro # Simple, atomic UI elements
│
├── 📚 lib
│ └── **/*.ts # Utilities (Databases, APIs…)
│
├── 🧱 modules
│ └── **/*.astro # Complex views made of elements
│
├── 📑 pages
│ ├── **/*.astro # File-based client routes
│ │
│ └── 🌐 api
│ └── [...entities].ts # Catch-all endpoint for CRUD ops.
│
├── 🚀 services
│ └── *.ts # Server-side CRUD operations
│
└── 📐 types
└── *.ts # Data entities typings
```
### 🛠 Tools
Efforts have been put on fast **onboarding** and **developer experience**.
This project comes with extensive support for TypeScript, Astro, Tailwind, and VS Code.
It is configured with sensible defaults, a bit of opinions, plus some tricks to make it plays nice together.
- **TypeScript**: _strictest_ Astro's settings. Full-stack, type-safe code base
- **ESLint**: featuring `astro-eslint-parser` + `eslint-plugin-astro`
- **Prettier**: featuring `prettier-plugin-astro` (bundled with `astro`)
- **Editorconfig**: conforming with prettier
- **VS Code**: extensions recommendations, tooling settings
- **Tailwind**: Astro integration (using Vite and PostCSS)
- **Flowbite**: dependencies (core, typography), settings
- **GitHub**: a [pre-configured workflow](https://github.com/themesberg/flowbite-astro-admin-dashboard/tree/main/.github/workflows) for deployment (using PNPM cache)
- **Sandboxes**: project is tested against and fully compatible with web containers
Feel free to hack those settings to cater for your own needs.
<div align="center">
<a href="https://user-images.githubusercontent.com/603498/224380239-0aff9ec2-3436-4fca-a842-230f29dd9677.png"><img class="w-full rounded-md overflow-hidden" alt="ide-tooling" src="https://user-images.githubusercontent.com/603498/224380239-0aff9ec2-3436-4fca-a842-230f29dd9677.png"></a>
<a href="https://user-images.githubusercontent.com/603498/224374764-dd1f98f8-df45-43c0-97f7-4b89ec427628.png"><img class="w-full rounded-md overflow-hidden" alt="gh-workflow" src="https://user-images.githubusercontent.com/603498/224374764-dd1f98f8-df45-43c0-97f7-4b89ec427628.png"></a>
<a href="https://user-images.githubusercontent.com/603498/224353577-51262536-742a-4204-b85f-3f83c209697d.png"><img class="w-full rounded-md overflow-hidden" alt="gh-workflow" src="https://user-images.githubusercontent.com/603498/224353577-51262536-742a-4204-b85f-3f83c209697d.png"></a>
</div>
## Browser Support
At present, we officially aim to support the last two versions of the following browsers:
<div align="center" class="flex justify-between w-full">
<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">
</div>
## Resources
- Live preview: <https://themesberg.github.io/flowbite-astro-admin-dashboard/>
- 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)
### JavaScript Frameworks
Here's a list of compatible technologies and guides for Flowbite and Tailwind CSS:
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/)
## 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
- [Julian Cataldo](https://twitter.com/Julian_Cataldo)
- [Zoltán Szőgyényi](https://twitter.com/zoltanszogyenyi)
- [Robert Tanislav](https://twitter.com/roberttanislav)
看看同类模板
对比同技术栈与用途的模板，找到更适合的视觉与内容结构。
AdminLTE
AdminLTE - Free admin dashboard template based on Bootstrap 5
Astro · 后台
accessible-astro-dashboard
accessible-astro-dashboard 是一个以无障碍为设计核心的 Astro 后台管理模板。
Astro · 后台
bootstrap-admin-template
AsteroAdmin 是一套用 Astro 和 Bootstrap 5.3.3 搭起来的后台界面模板，定位偏静态前端骨架：页面由 .astro 组件与布局拼装，样式走 SCSS 变量体系，构建链整合了 ESBuild…
Astro · 后台
accessible-astro-docs
Official documentation website for all the Accessible Astro Projects, which include the Starter, Dashboard and…
Astro · 后台
astro-blog
Astro 6 blog template with built-in browser admin panel. Write & publish MDX posts without touching a text edi…
Astro · 后台
n8n-stats
Community health dashboard for n8n - track growth, templates, nodes, creators, and events
Astro · 后台