方案简介

Shadcn UI Kit (Free) 是一个开源免费的 shadcn/ui 组件与模板套件，为 React、Next.js 和 Tailwind CSS 项目提供生产可用的组件、区块、示例和免费管理后台模板。它解决的是开发者每次新项目都要重复搭建表格、表单、图表和落地页区块的问题。本仓库是付费版的免费开源版本，包含免费组件、区块、示例、一个免费管理后台模板以及浏览站点的完整源码，可本地运行、阅读代码并把所需内容复制进自己的项目。适合使用 shadcn/ui 技术栈的前端开发者与团队。

亮点与能力

• 49 个分类下共 527 个免费 shadcn/ui 组件，包括 Accordion、Data Table、Combobox、File Upload、Calendar 等
• 面向营销站与仪表盘的免费 UI 区块：hero、FAQ、登录表单、统计卡片、数据表格、todo 应用等
• 真实场景示例，如评论卡片和日期选择器用例
• /admin 免费管理后台模板：侧边栏布局、统计卡片、交互式面积图、可排序数据表、用户与设置页、登录注册页、404/500 错误页
• 每个免费条目都有 shadcn registry，单条命令即可安装到项目中
• 实时预览支持桌面/平板/手机视口切换、独立暗色模式开关和完整源码查看对话框
• 所有组件同时支持 Radix UI 与 Base UI 原语

组成与分工

• shadcn/ui：组件体系基础，所有组件与区块均构建于其上
• Next.js 16（App Router）：浏览站点与后台模板的应用框架
• React：UI 运行时
• Tailwind CSS：样式方案，主题变量以 Tailwind CSS v4 变量形式生成
• Radix UI / Base UI：无障碍无样式原语层，组件兼容两者
• TanStack Table：数据表格能力
• Recharts：图表（如面积图）
• React Hook Form + Zod：表单与校验（如设置页 profile 表单）
• dnd kit：拖拽交互
• shadcn registry：组件分发机制，支持 CLI 单命令安装

前置要求

本仓库明确声明不需要任何后端环境：

• 无需数据库
• 无需身份认证
• 无需支付服务商
• 无需环境变量

获取代码：

bash
git clone https://github.com/bundui/shadcn-ui-kit

README 声明的启动流程为：克隆仓库、安装依赖、运行：

bash

Clone the repository, install the dependencies and run it.

实施步骤

1. 克隆仓库

bash
git clone https://github.com/bundui/shadcn-ui-kit

2. 安装依赖

进入目录后安装依赖（README 原文：install the dependencies）。

3. 运行站点

按 README 声明的流程运行，即可在本地浏览全部免费组件、区块、示例与 /admin 后台模板。

4. 将组件安装到自己的项目

每个免费条目都有对应的 shadcn registry 条目，可通过一条命令（shadcn CLI）安装任意区块或组件到你的项目；也可以通过预览界面的 "Get the Code" 对话框直接查看并复制完整源码。

使用与配置要点

• 通过站点实时预览验证组件效果，支持 desktop/tablet/mobile 视口切换与逐条目暗色模式切换
• 点击 "Get the Code" 对话框获取任一条目的完整源码
• 免费后台模板位于 /admin，含侧边栏布局、统计卡片、交互式面积图、可排序数据表、用户页、带校验的设置表单、登录注册页及 404/500 错误页，可作为项目起点直接改造
• 主题定制可参考 Theme Generator 的思路：调整 primary、secondary、card、popover、muted、accent、destructive 等颜色，把生成的 Tailwind CSS v4 变量复制进 globals.css（该工具本身属 Pro 版）

注意事项与常见问题

• 本仓库仅为免费版：Theme Generator、Page Builder、高级区块、付费管理后台与模板属于 Shadcn UI Kit Pro，不在本仓库中
• 免费版不含数据库、认证、支付等后端集成，如需真实业务需自行接入
• 组件同时支持 Radix UI 与 Base UI 两种原语，选择与项目现有原语一致的版本即可

优缺点

• ✓ 527个免费组件49类
• ✓ 注册表一条命令安装
• ✕ 高级工具需付费Pro版
• ✕ 无数据库鉴权等后端能力

出处

本方案挖掘自开源项目 bundui/shadcn-ui-kit，方案内容与实施命令均来自其 README 原文。