基于 Next.js app router、React 与 TypeScript 构建
admin-one-react-tailwind — Next.js 后台模板
作者 justboil
Admin One 是一个基于 Next.js、React、TypeScript 与 Tailwind CSS 的免费后台管理模板,采用 app router,内置 React Redux 状态管理与深色模式,提供可复用组件与响应式布局。
看看你的网站会是什么样
浏览真实页面截图,比较内容排版与手机效果。点击下方缩略图切换,放大查看整页细节。
全部页面与视图 2
截图用于了解视觉与布局,交互效果请以实际项目为准。
值得关注的模板亮点
从已有项目资料中,快速了解它的特点。
使用 Tailwind CSS 实现界面样式,生产 CSS 体积约 38KB
内置深色模式与 React Redux 状态管理
提供可复用组件,覆盖移动端到桌面端的响应式布局
MIT 许可,可免费使用、修改、商用与分发
模板详细介绍
Admin One 是 JustBoil 发布的免费后台管理模板,仓库名为 admin-one-react-tailwind。技术栈为 Next.js(app router)、React、TypeScript 与 Tailwind CSS,状态管理使用 React Redux,并内置深色模式。模板提供可复用组件,布局覆盖移动端、平板、小尺寸笔记本与桌面端:移动端隐藏侧边菜单并折叠卡片与表格,小尺寸笔记本可显示或隐藏侧边菜单,桌面端为左侧边栏的经典布局。构建由 Next.js CLI 处理,支持开发热重载、生产构建与压缩,以及通过环境变量导出静态站点。项目采用 MIT 许可,免费版本仅限社区支持,问题列表只接受缺陷报告与功能请求,不处理使用问题;官方文档尚未提供,付费版本仍在开发中。
适合你的项目吗?
适用场景
- 需要快速搭建带侧边栏与数据展示区域的后台管理界面
- 使用 Next.js app router 与 TypeScript 开发管理端项目
- 需要深色模式与响应式布局的后台模板
- 希望以 React Redux 管理后台状态的项目
- 需要可导出为静态站点的后台界面原型
适合人群
- 熟悉 React、Next.js 与 TypeScript 的前端开发者
- 需要后台管理界面基础组件与布局的团队
- 接受社区支持、不依赖官方文档的使用者
- 可自行核对第三方素材许可的项目
上手与定制指南
结合仓库当前版本的说明,按下面的资料检查内容、配置与运行要求。
- 1
通过 GitHub 模板生成仓库、克隆仓库或下载 zip 获取代码
- 2
进入项目目录后运行 npm install 安装依赖
- 3
使用 npm run dev 启动开发热重载,npm run build 进行生产构建
- 4
如需导出静态站点,将 IS_OUTPUT_EXPORT 环境变量设为 true,或在 next.config.ts 中设置 output
- 5
可使用 npm run lint 与 npm run format 进行代码检查与格式化
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本;免费范围为该版本代码,不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时,保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供;担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 免费版本仅提供 GitHub 社区支持,不提供官方技术支持或使用问题解答。
- 问题列表仅接受缺陷报告与功能请求,不接受使用类提问,不符合要求的 issue 会被关闭。
- 付费高级版本仍在开发中,免费版不包含其功能;如需高级功能需另行购买。
- 官方文档尚未提供,使用者需自行阅读源码或依赖社区资源。
- 项目资料提及可选付费版本或功能;本次仅收录公开免费代码,不包含付费升级。
- 演示图片、字体、图标及其他第三方素材需按各自许可核对,不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
JustBoil's free items are limited to community support on GitHub.
README 原文
The issue list is reserved exclusively for bug reports and feature requests. That means we do not accept usage questions.
README 原文
Premium version is coming soon
README 原文
https://github.com/justboil/admin-one-react-tailwind/blob/master/LICENSEhttps://github.com/justboil/admin-one-react-tailwind/blob/master/README.mdDocs are coming soon
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-09-30。结果仅覆盖已读取资料,依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料较完整 · 96 / 100
- 技术栈
- Next.js · React
- 网站类型
- 后台
这个分数如何计算
本站按许可资料(最高30分)、演示链接(12分)、预览图(10分)、Star数(15分)、记录的维护时间(15分)、描述完整度(8分)、功能记录(5分)和分类资料(5分)计算。它不是代码、安全或性能测试,也不是 Google 评分;有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2025-10-24
- 截图检查日期
- 2026-09-30
已收录演示链接。请用你的内容与屏幕尺寸检查;有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 Next.js。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料,不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
已完成服务器许可规则与 AI 来源核对;未经过人工编辑审核。
查看当时使用的来源资料
SHA-256: 0360ff1cc3179f497e636ac0d6879d4cf7c1ebcf35a4905f245ae5c018e27727
2026-09-30T08:10:47.343Z
来源文件 / 仓库# [Admin One — Free React Tailwind 4.x Admin Dashboard with dark mode](https://justboil.me/tailwind-admin-templates/free-react-dashboard/) [](https://justboil.me/tailwind-admin-templates/free-react-dashboard/) [](https://justboil.me/tailwind-admin-templates/free-react-dashboard/) ### Tailwind 4.x React with Next.js and TypeScript [](https://justboil.github.io/admin-one-react-tailwind/) [](https://justboil.github.io/admin-one-react-tailwind/) ### Tailwind 4.x React with Next.js and TypeScript **Admin One** is fast, beautiful and free React Next Tailwind CSS 4.x admin dashboard with TypeScript. * Built with **TypeScript**, **React**, **Tailwind CSS 4** framework & **Next.js** with **app router** * **React Redux** state library — [Info](https://react-redux.js.org/) * **Dark mode** * **Production CSS** is only **≈38kb** * Reusable components * Free under MIT License * [Premium version](https://justboil.me/tailwind-admin-templates/react-dashboard/) available ## Table of Contents * [Vue version](#looking-for-vue-version) * [Responsive layout](#responsive-layout) * [Mobile & tablet](#mobile--tablet) * [Small laptops](#small-laptops-1024px) * [Laptops & desktops](#laptops--desktops) * [Demo](#demo) * [Free dashboard demo](#free-dashboard-demo) * [Premium dashboard demo](#premium-dashboard-demo) * [Quick Start](#quick-start) * [Get code & install](#get-code--install) * [Builds](#builds) * [Linting and formatting](#linting-and-formatting) * [Docs](#docs) * [Browser Support](#browser-support) * [Reporting Issues](#reporting-issues) * [Licensing](#licensing) * [Useful Links](#useful-links) ## Looking for Vue version? This is **Tailwind React TypeScript** version Looking for **Tailwind Vue**? Check [Admin One - Vue Tailwind dashboard](https://github.com/justboil/admin-one-vue-tailwind) version ## Responsive layout ### Mobile & tablet Mobile layout with hidden aside menu and collapsable cards & tables [](https://justboil.github.io/admin-one-react-tailwind/) ### Small laptops 1024px Small laptop layout with show/hide aside menu option [](https://justboil.github.io/admin-one-react-tailwind/) [](https://justboil.github.io/admin-one-react-tailwind/) ### Laptops & desktops Classic layout with aside menus on the left [](https://justboil.github.io/admin-one-react-tailwind/) ## Demo ### Free Dashboard Demo https://justboil.github.io/admin-one-react-tailwind/ ### Premium Dashboard Demo Premium version is coming soon ## Quick Start Get code & install. Then `dev` or `build` * [Get code & install](#get-code--install) * [Builds](#builds) * [Linting and formatting](#linting-and-formatting) ### Get code & install #### Get the repo * [Create new repo](https://github.com/justboil/admin-one-react-tailwind/generate) with this template * … or clone this repo on GitHub * … or [download .zip](https://github.com/justboil/admin-one-react-tailwind/archive/master.zip) from GitHub #### Install `cd` to project's dir and run `npm install` ### Builds Build are handled by Next.js CLI — [Info](https://nextjs.org/docs/app/api-reference/cli/next) #### Hot-reloads for development ``` npm run dev ``` #### Builds and minifies for production ``` npm run build ``` #### Exports build for static hosts Set `IS_OUTPUT_EXPORT` environment variable to `true` (or set `output` in next.config.ts) ### Linting & Formatting #### Lint ``` npm run lint ``` #### Format with prettier ``` npm run format ``` ## Docs Docs are coming soon ## Browser Support We try to make sure Dashboard works well in the latest versions of all major browsers <img src="https://justboil.me/images/browsers-svg/chrome.svg" width="64" height="64" alt="Chrome"> <img src="https://justboil.me/images/browsers-svg/firefox.svg" width="64" height="64" alt="Firefox"> <img src="https://justboil.me/images/browsers-svg/edge.svg" width="64" height="64" alt="Edge"> <img src="https://justboil.me/images/browsers-svg/safari.svg" width="64" height="64" alt="Safari"> <img src="https://justboil.me/images/browsers-svg/opera.svg" width="64" height="64" alt="Opera"> ## Reporting Issues JustBoil's free items are limited to community support on GitHub. The issue list is reserved exclusively for bug reports and feature requests. That means we do not accept usage questions. If you open an issue that does not conform to the requirements, it will be closed. 1. Make sure that you are using the latest version of the Dashboard. Issues for outdated versions are irrelevant 2. Provide steps to reproduce 3. Provide an expected behavior 4. Describe what is actually happening 5. Platform, Browser & version as some issues may be browser specific ## Licensing - Copyright © 2019-2025 JustBoil.me (https://justboil.me) - Licensed under MIT ## Useful Links - [JustBoil.me](https://justboil.me/) - [Tailwind CSS](https://tailwindcss.com/) - [Next.js Docs](https://nextjs.org/docs/app/getting-started) - [React.js Docs](https://react.dev/learn) - [Redux Docs](https://redux.js.org/introduction/getting-started) & [React-Redux Docs](https://react-redux.js.org/introduction/getting-started) - [TypeScript Docs](https://www.typescriptlang.org/docs/) - [TypeScript ESLint Docs](https://typescript-eslint.io/docs/)
看看同类模板
对比同技术栈与用途的模板,找到更适合的视觉与内容结构。

next-shadcn-dashboard-starter
Free, open source, AI-friendly admin dashboard template built with Next.js 16, shadcn/ui, Tailwind CSS, and Ty…
Next.js · 后台

Studio Admin · Radix UI
Modern Admin Dashboard Template built with Shadcn UI and Next.js 16
Next.js · 后台

free-nextjs-admin-dashboard
TailAdmin is a Next.js and Tailwind CSS free, open-source admin dashboard template. Provides developers with t…
Next.js · 后台

materio-mui-nextjs-admin-template-free
An enterprise-grade Next.js admin dashboard template. Made with developer experience first: Next.js v14 (App R…
Next.js · 后台

nextjs-postgres-nextauth-tailwindcss-template
Admin dashboard template.
Next.js · 后台

shadcn-dashboard-landing-template
Accelerate your development with a sleek, open-source admin dashboard and landing page built on Vite-React, Ne…
Next.js · 后台
