基于 Next.js App Router、Shadcn UI 与 Tailwind CSS 构建的后台模板
Next.jsReact后台
shadcn-nextjs-admincn-admin-template-free — Next.js 后台模板
作者 shadcnstudio
AdminCN Free 是一个基于 Next.js、Shadcn UI 与 Tailwind CSS 的免费后台管理模板，包含订单仪表盘、邮件、日历、用户等应用页面与认证流程，采用 MIT 许可。
看看你的网站会是什么样
浏览真实页面截图，比较内容排版与手机效果。点击下方缩略图切换，放大查看整页细节。
全部页面与视图 2
截图用于了解视觉与布局，交互效果请以实际项目为准。
采集于 2026-10-02查看来源
值得关注的模板亮点
从已有项目资料中，快速了解它的特点。
内置订单仪表盘，含统计、图表与小组件
提供 Mail、Calendar、Users 三个应用页面
包含登录、注册、忘记密码、验证邮箱、重置密码、两步验证等认证页面
提供表单布局、表单校验与数据表格示例
使用 fake-db 模拟数据，便于接入真实 API 前预览界面
模板详细介绍
AdminCN Free 是 Shadcn Studio 发布的免费后台管理模板，使用 Next.js App Router、Shadcn UI 与 Tailwind CSS 构建。模板提供订单仪表盘，包含统计卡片、图表与小组件；同时内置 Mail、Calendar、Users 三个应用页面，以及登录、注册、忘记密码、验证邮箱、重置密码、两步验证等认证页面，另有表单布局、表单校验与数据表格示例。
项目结构按路由分组：带侧边栏与顶栏的后台外壳路由（dashboard、apps、pages、datatable、forms）与不带外壳的空白路由（认证页、错误页）分开组织。数据层使用 fake-db 模拟数据，便于在接入真实 API 前预览界面；导航菜单、主题与邮件应用分别由 configs 目录下的配置文件管理。
免费版本与付费版本存在明确差异：免费版仅提供订单仪表盘，不含主题定制器、Zustand 状态管理、多种仪表盘布局与更多应用页面；演示数据为静态数据。本次收录范围仅为公开仓库中的 MIT 许可代码，不包含付费升级内容。
Next.js后台
适合你的项目吗？
适用场景
- 快速搭建后台管理系统的界面骨架
- 需要订单仪表盘与统计图表的项目
- 需要邮件、日历、用户管理页面示例的后台
- 需要登录、注册、密码找回等认证流程页面的项目
- 需要表单布局、表单校验与数据表格示例的界面开发
适合人群
- 使用 Next.js 与 Shadcn UI 技术栈的前端开发者
- 需要免费后台模板起步的中小型项目
- 希望参考后台页面组织与路由结构的开发者
- 需要认证页面与数据表格示例的界面搭建场景
上手与定制指南
结合仓库当前版本的说明，按下面的资料检查内容、配置与运行要求。
- 1
免费版使用静态数据与 fake-db 模拟数据，接入真实接口需自行替换数据层
- 2
免费版不含 Zustand 状态管理、主题定制器与多种仪表盘布局，这些属于付费版本
- 3
演示图片、字体、图标等第三方素材需按各自许可单独核对
- 4
域名、托管、数据库等外部服务可能产生额外费用
- 5
分发代码副本或实质性部分时需保留原作者版权声明与 MIT 许可声明
授权与来源资料
使用条件与限制
免费使用 · 保留许可声明本次收录的是公开仓库中采用 MIT 许可的免费版本；免费范围为该版本代码，不代表外部服务或第三方素材免费。
使用时需要遵守
- 允许免费使用、修改、商用和分发该版本代码。
- 分发代码副本或实质性部分时，保留原作者版权声明和完整 MIT 许可声明。
- 代码按现状提供；担保与责任限制以原许可证及适用法律为准。
额外费用与待核对事项
- 使用免费项目时需保留署名：需在网站或项目页脚放置指向 ShadcnStudio 的链接（<a href="https://shadcnstudio.com/">ShadcnStudio</a>）。
- 免费项目采用 MIT 许可，可用于个人及商业用途；但付费版本（Admin Pro）内容不在免费授权范围内，不得作为免费内容使用。
- 免费版功能受限：无状态管理、页面版本较少、使用静态数据；Zustand 状态管理、主题定制器、更多仪表盘布局与应用属于付费版。
- 项目资料提及可选付费版本或功能；本次仅收录公开免费代码，不包含付费升级。
- 演示图片、字体、图标及其他第三方素材需按各自许可核对，不能仅凭代码的 MIT 许可判断。
- 域名、托管、数据库、支付或 AI 等外部服务可能另外收费。
查看原文依据
Permission is hereby granted, free of charge
许可证原文
We just need attribution from your end. Copy the link below and paste it in the footer of your web application or project.
README 原文
All our free items are Open Source and licensed under MIT. You can use our free items for personal as well as commercial purposes.
README 原文
https://github.com/shadcnstudio/shadcn-nextjs-admincn-admin-template-free/blob/main/LICENSE.mdhttps://github.com/shadcnstudio/shadcn-nextjs-admincn-admin-template-free/blob/main/README.mdLimited functionality without state management, Limited pages version, static data
README 原文
DeepSeek 根据仓库许可证和 README 整理 ·2026-10-02。结果仅覆盖已读取资料，依赖、图片、字体及后续条款变更以各自原文为准。
项目核对记录与介绍依据
模板资料
- 来源平台
- GitHub
- 资料与维护参考分
- 资料较完整 · 91 / 100
- 技术栈
- Next.js · React
- 网站类型
- 后台
这个分数如何计算
本站按许可资料（最高30分）、演示链接（12分）、预览图（10分）、Star数（15分）、记录的维护时间（15分）、描述完整度（8分）、功能记录（5分）和分类资料（5分）计算。它不是代码、安全或性能测试，也不是 Google 评分；有链接不代表已实测可用。
这个项目需要核对什么
- 记录的仓库更新时间
- 2026-08-20
- 截图检查日期
- 2026-10-02
已收录演示链接。请用你的内容与屏幕尺寸检查；有演示不代表表单、认证或支付已经可用。
目录记录的主要技术栈是 Next.js。请通过依赖清单和锁文件核对实际版本与托管要求。这些说明基于收录资料，不代表代码审计或部署实测。
查看具体选型方法 →介绍的制作与核对状态
介绍由 AI 辅助整理目录与仓库资料。仓库作者不等于这篇介绍的审核者。
已完成服务器许可规则与 AI 来源核对；未经过人工编辑审核。
查看当时使用的来源资料
SHA-256: 51ab923edfc46131445682bbe94b10bfed690241940919d79b902b910f776b55
2026-10-02T16:39:26.679Z
来源文件 / 仓库<p align="center">
<a href="https://shadcnstudio.com/templates/admin-dashboard-free/admincn" target="_blank">
<img src="https://cdn.shadcnstudio.com/ss-assets/logo/logo.png" alt="admincn-logo" width="32px" height="32px">
</a>
</p>
<h1 align="center">
<a href="https://shadcnstudio.com/templates/admin-dashboard-free/admincn" target="_blank" align="center">
AdminCN - Free Shadcn Admin Dashboard Template
</a>
</h1>
<p align="start">AdminCN Free is a responsive Next.js admin dashboard template built with Shadcn UI and Tailwind CSS. It ships with an orders dashboard, Mail, Calendar & Users apps, authentication pages, form layouts, data tables, and 1000+ component variants to help you build your next admin panel faster.</p>
   
<kbd>[](https://shadcn-nextjs-admincn-admin-template-free.vercel.app/dashboard/orders)</kbd>
## Introduction 📊
AdminCN Free is built with Next.js, Shadcn UI, and Tailwind CSS, offering a production-ready admin dashboard to kickstart your next project. It includes an orders dashboard, Mail, Calendar & Users apps, authentication pages, form layouts, form validation, and a data table.
[View Demo](https://shadcn-nextjs-admincn-admin-template-free.vercel.app/dashboard/orders)
[View Documentation](https://shadcnstudio.com/docs/documentation-admin/getting-started)
<p>
Supported by
<a href="https://shadcnstudio.com" target="_blank">
Shadcn Studio
</a>
, with a commitment to empowering the open-source community.
</p>
## Key Features ✨
- **Orders Dashboard** - Ready-to-use dashboard layout with statistics, charts, and widgets
- **Apps** - Mail, Calendar, and Users apps out of the box
- **Authentication Pages** - Login, Register, Forgot Password, Verify Email, Reset Password, and Two Steps Verification
- **Forms & Tables** - Vertical & Horizontal form layouts, form validation, and a data table
- **Built with Next.js** - App Router based, fast, SEO-friendly React framework
- **Tailwind CSS v4** - Easy theming and utility-based styling
- **Responsive & Mobile-First** - Designed to look great on all devices
- **1000+ Shadcn Component Variants** - Statistics, charts, and widgets included
## Folder Structure
```
|-- public/ # Static assets served from the site root
| |-- images/ # Public images, logos, and media
|-- src/ # Application source code
| |-- app/ # Next.js App Router routes and layouts
| | |-- favicon.ico # Browser favicon
| | |-- globals.css # Tailwind CSS, CSS variables, and theme tokens
| | |-- layout.tsx # Root layout, fonts, metadata, and providers
| | |-- not-found.tsx # Custom 404 page
| | |-- server/ # Server Actions and server-only helpers
| | |-- api/ # Route handlers used by demo features
| | |-- (pages)/ # Admin shell routes with sidebar and header
| | | |-- dashboard/ # Orders dashboard
| | | |-- apps/ # Calendar, mail, users
| | | |-- pages/ # Profile and settings
| | | |-- datatable/ # Data table
| | | |-- forms/ # Form layouts and validation
| | |-- (blank)/ # Routes without the admin shell
| | | |-- pages/auth/ # Authentication screens
| | | |-- pages/misc/ # Error page
| |-- assets/ # Local data files, SVGs, and static helpers
| | |-- data/ # Constants and option data
| | |-- svg/ # SVG assets used by the UI
| |-- components/ # Shared React components
| | |-- layout/ # Sidebar, header, footer, and shell pieces
| | |-- shared/ # Shared UI components
| | |-- ui/ # shadcn/ui primitives
| | |-- Providers.tsx # App provider wrapper
| | |-- ThemeProvider.tsx # Theme provider wrapper
| |-- configs/ # Template configuration files
| | |-- navConfig.tsx # Sidebar menu structure and icons
| | |-- themeConfig.ts # Theme config
| | |-- mailConfig.ts # Mail app config
| |-- fake-db/ # Mock data used by demos before API integration
| |-- hooks/ # Reusable client hooks
| |-- lib/ # General utilities and shared helpers
| |-- types/ # Shared TypeScript interfaces and types
| |-- utils/ # Feature-specific helper functions
| |-- views/ # Page-level UI composed by route files
| | |-- apps/ # App view modules
| | |-- dashboards/ # Dashboard charts, statistics, and widgets
| | |-- datatables/ # Data table views
| | |-- forms/ # Form layout and validation views
| | |-- pages/ # Auth, misc, profile, and settings views
|-- .env.example # Environment variable reference
|-- components.json # shadcn/ui aliases and registry config
|-- eslint.config.mjs # ESLint configuration
|-- next.config.ts # Next.js configuration
|-- package.json # Scripts and dependencies
|-- postcss.config.mjs # Tailwind CSS v4 PostCSS setup
|-- tsconfig.json # TypeScript compiler and path aliases
|-- vercel.json # Vercel deployment configuration
```
**Key UI Sections**
- **Dashboard** - Orders overview with statistics, charts, and widgets
- **Apps** - Mail, Calendar, and Users management
- **Authentication** - Login, Register, and account recovery flows
- **Forms & Tables** - Layouts, validation, and data table views
- **User Pages** - Profile and account settings
---
## What's Included 📦
- Dashboard
- Orders Dashboard
- Apps
- Mail
- Calendar
- Users
- Pages
- User Settings
- User Profile
- Login Page
- Register Page
- Forgot Password Page
- Verify Email Page
- Reset Password Page
- Two Steps Verification Page
- Error Page
- Forms & Tables
- Form Layouts
- Form Validation
- Data Table
- Components
- 1000+ Shadcn Component Variants
- Statistics, Charts & Widgets
- Miscellaneous
- Menu Levels
- Support
- Documentation
## What's in Premium Version 💎
| Feature Area | Admin Free | Admin Pro |
| -------------------- | ------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Dashboard Demo | [AdminCN Free Dashboard](https://shadcn-nextjs-admincn-admin-template-free.vercel.app/dashboard/orders) | [AdminCN Pro Dashboard](https://shadcn-nextjs-admincn-admin-template.vercel.app/dashboard/orders) |
| Get Dashboard | [Download](https://shadcnstudio.com/templates/admin-dashboard-free/admincn) | [Purchase](https://shadcnstudio.com/#pricing) |
| Features | Theme Toggle, Limited functionality without state management, Limited pages version, static data | Theme Toggle, Theme Customizer, More functionality with Zustand state management, More pages versions, Multiple variants of components and pages, data with dynamic state/fake-db |
| Dashboard | Orders dashboard | Sales, Finance, Logistics, Productivity, Campaign, Analytics, Payments, eCommerce, Orders dashboards |
| Dashboard Layouts | — | Horizontal Layout, Full Navbar Layout, Split Layout, Icon Menu Layout, Paper Layout |
| Apps | Mail, Calendar, Users | Mail, Chat, Kanban, Calendar, Contact, Users, Roles & Permissions |
| Full Apps Template | — | [PropXYZ](https://shadcn-nextjs-propxyz-admin-template.vercel.app/), [CommerceO](https://shadcn-nextjs-commerceo-admin-template.vercel.app/), [Calendrix](https://shadcn-nextjs-calendrix-app-template.vercel.app/), [Promptly](https://shadcn-nextjs-promptly-app-template.vercel.app/) |
| Landing Page | — | ✅ |
| User Settings | General, Workspace | General, Notifications, Integrations, Members, Security, Billing, Workspace |
| User Profile | Profile, Connections | Profile, Connections, Teams, Projects |
| Pricing | — | ✅ |
| FAQ | — | ✅ |
| Onboarding | — | 2 Variants |
| Authentication Pages | Login, Register, Forgot Password, Verify Email, Reset Password, Two Steps - All pages have 1 Variant | Login , Register , Forgot Password , Verify Email , Reset Password , Two Steps - All pages have 3 Variants |
| Error Pages | 1 Variant | 4 Variants |
| Empty State Pages | — | 2 Variants |
| Form Layouts | Vertical, Horizontal | Vertical, Horizontal, Sticky with more forms & variants |
| Form Validation | ✅ | Included, with more forms & variants |
| Form Wizard | — | Icons stepper, Number stepper |
| Data Table | ✅ | Included with more variants |
## 🚀 Quick Start
### Prerequisites
- Node.js 18, 20, or 22+
- pnpm (recommended) or npm
### Installation
1. **Install dependencies:**
```bash
pnpm install
```
2. **Start the development server:**
```bash
pnpm dev
```
The site will be available at `http://localhost:3000`
3. **Build for production:**
```bash
pnpm build
```
4. **Preview the production build:**
```bash
pnpm start
```
## 🧞 Available Commands
The template comes with several pre-configured scripts to help you with development, building, and maintaining your project. All scripts can be run using your package manager of choice (npm, pnpm, yarn, or bun) from the root of the project.
| Command | Action |
| :------------ | :------------------------------------------------------------------------------------------------------------------------------------- |
| `dev` | Starts the Astro development server with hot-reload enabled. Your application will be available at http://localhost:3000/ |
| `build` | Creates an optimized production build of your application. This command generates static files and optimizes your code for deployment. |
| `start` | Preview production site locally. Use this to test your production build locally before deploying. |
| `lint` | Runs ESLint to check your code for potential errors and code quality issues. This helps maintain clean and consistent code. |
| `lint:fix` | Runs ESLint and automatically fixes problems where possible. |
| `format` | Formats all files using Prettier to ensure consistent code style. |
| `clean` | Cleans the project by removing temporary files and build artifacts. |
| `check-types` | Checks TypeScript types to catch type errors before building or deploying. |
## 🌐 Deployment
Check out our [Deployment docs](https://shadcnstudio.com/docs/documentation-admin/deployment)
## Documentation 📚
For comprehensive documentation, please visit [shadcn/studio documentation](https://shadcnstudio.com/docs/documentation-admin/introduction).
## Changelog 📆
Please refer to the [CHANGELOG file](CHANGELOG.md). We will add a detailed release notes to each new release.
## License ©
- Copyright © [ShadcnStudio](https://shadcnstudio.com/)
- Licensed under [MIT](LICENSE)
- All our free items are Open Source and licensed under MIT. You can use our free items for personal as well as commercial purposes. We just need attribution from your end. Copy the link below and paste it in the footer of your web application or project.
```html
<a href="https://shadcnstudio.com/">ShadcnStudio</a>
```
---
<br />
<a href="https://shadcnstudio.com" target="_blank">
<img src="https://cdn.shadcnstudio.com/ss-assets/smm/marketing/shadcn-studio-smm-banner.png" alt="shadcn/studio banner" width="1200">
</a>
<p>
<a href="https://shadcnstudio.com" target="_blank">
shadcn/studio
</a>
is an open-source collection of copy-and-paste shadcn components, blocks, and templates - paired with a powerful theme generator & AI Tools to craft, customize, and ship faster. 🚀
</p>
## Overview 🌏
**This isn't a traditional component library or a replacement for Shadcn**. Instead, it's a unique collection offers customizable variants of components, blocks, and templates. Preview, customize, and copy-paste them into your apps with ease.
Building on the solid foundation of the Shadcn components & blocks, we've enhanced it with custom-designed components & blocks to give you a head start. This allows you to craft, customize, and ship your projects faster and more efficiently.
### Not a standard library, but a distribution of components
Following the philosophy of Shadcn, shadcn/studio isn't a conventional "install-from-NPM" library. Rather, it's an open-source distribution of components designed for maximum adaptability. You can copy the code, modify styles, adjust logic, or integrate it with other tools—free from the limitations of typical libraries. This "open code" model empowers you to customize with confidence and creativity.
## Why should I use shadcn/studio? 💡
shadcn/ui aims to provide core components with a unique distribution system, allowing developers to copy and paste reusable, customizable UI elements directly into their codebase.
While this approach offers flexibility and control, it comes with some limitations: a lack of diverse component variants examples, limited theme customization options, and limited pre-built blocks. Additionally, its extensive customization options, though powerful, can sometimes feel overwhelming, especially for those seeking a more guided or streamlined experience.
## Community 🤝
Join the shadcn/studio community to discuss the library, ask questions, and share your experiences:
- 🐦 [Follow us on Twitter](https://x.com/ShadCNStudio)
- 🎮 [Join us on Discord](https://discord.com/invite/kBHkY7DekX)
## Credits 🤘
We are grateful for the contributions of the open-source community, particularly:
- [shadcn/ui](https://ui.shadcn.com/)
- [tweakcn](https://tweakcn.com/) (Our Theme Generator is heavily inspired by tweakcn)
These projects form the backbone of shadcn/studio, allowing us to build a powerful copy-and-paste components.
## Useful Links 🎁
- [Shadcn Blocks](https://shadcnstudio.com/blocks)
- [Shadcn Templates](https://shadcnstudio.com/templates)
- [Shadcn Admin Dashboard](https://shadcnstudio.com/templates/admin-dashboard)
- [Shadcn Figma UI Kit](https://shadcnstudio.com/figma)
- [Shadcn Theme Generator](https://shadcnstudio.com/theme-generator)
- [Shadcn MCP Server](https://shadcnstudio.com/mcp)
- [Shadcn IDE Extension](https://shadcnstudio.com/ide-extension)
- [Shadcn Components](https://shadcnstudio.com/components)
- [Shadcn Figma to Code](https://shadcnstudio.com/figma-plugin)
## Social Media :earth_africa:
- [x](https://x.com/ShadcnStudio)
- [Discord](https://discord.com/invite/kBHkY7DekX)
- [YouTube](https://www.youtube.com/@themeselection)
看看同类模板
对比同技术栈与用途的模板，找到更适合的视觉与内容结构。
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 · 后台