Shadcn Dashboard

Shadcn Dashboard - 面向 React、Next.js 的生产级 shadcn 后台面板搭建工具,内置 200+ 区块、400+ 组件与 AI 提示词

今日首发

Shadcn Dashboard Kit 是专为 React、Next.js、TypeScript 和 Tailwind CSS 打造的完整生产级后台面板开发套件,自带 200+ 预制 UI 区块、400+ 组件和内置 AI 提示词。前端开发者和团队使用它搭建可扩展的后台界面、内部工具和 SaaS 仪表盘的速度可以提升 3 倍,套件内置预配置的身份验证、数据表格和交互式图表,直接可以上线部署。

2访问量AI 编程免费增值低代码零代码代码生成VS Code开源

核心功能

Shadcn Dashboard Kit 包含 200+ 生产可用的 UI 区块和 400+ 组件,所有组件都经过多浏览器、多设备测试,省去直接用大模型生成 UI 后常见的调试工作量。全部组件基于 Base UI 无障碍无样式原语构建,你可以通过 CSS 变量和 Tailwind 配置完全自定义设计样式。

AI 搭建能力

内置的 AI 仪表盘搭建工具可以把日常自然语言描述在几秒内转成完整的生产级仪表盘。它生成干净的 Next.js 16 和 Shadcn UI 代码,自带交互式 Recharts 可视化、TanStack 数据表格、品牌主题预设、深色模式支持,还可以导出 TypeScript 代码。AI 搭建工具还支持一键部署和 GitHub 同步。

MCP 服务器集成

你可以把附带的 Model Context Protocol 服务器接入 Cursor、Claude Code、Cline、Windsurf 和 v0 等 AI 代码编辑器。该服务器会对全量组件注册表建立索引,让你的 AI 助手完全感知当前工作区内容,生成的 UI 代码准确、一致,完全匹配你现有的项目结构,不需要手动粘贴项目上下文。

支持的附加组件与集成

套件内置预配置的常用开发者工具,开箱即用:

  • 集成 Supabase 认证 + 数据库、Clerk、NextAuth 身份验证方案

  • 自带排序、筛选、分页、虚拟化功能的 TanStack Table

  • 用于类型安全表单校验的 Zod

  • 经过性能优化、使用 Framer Motion 实现的动画效果

  • 基于 Dnd kit 开发的无障碍拖拽组件

  • 用于高效缓存数据请求的 SWR

  • 提供多语言支持的 i18n React

  • 支持 Markdown 的 Tiptap 富文本编辑器

可用仪表盘模板

套件内置覆盖常见使用场景的预制仪表盘模板:

  • 数据分析仪表盘

  • 电商仪表盘

  • SaaS AI 仪表盘

  • 学校管理仪表盘

  • 健康管理仪表盘

你可以在多种布局模式之间切换,包括顶部导航、可折叠侧边栏、迷你紧凑侧边栏和 RTL 从右到左显示模式。套件还提供 Lyra、Nova、Maia、Mira、Luma、Vega、Rhea 多个动态主题预设,点击一次就能修改全局设计风格。

使用流程

你可以直接用完整的 Next.js 模板从零启动新项目,也可以用官方 CLI 把单个组件区块直接安装到现有项目里。CLI 会自动配置导入路径,为选中的组件安装所有必需的依赖。 每个组件和区块都有现成的预制 AI 提示词,你可以把提示词粘贴到 ChatGPT、Claude 或其他大模型里,生成符合套件架构规范的配套 UI 扩展或修改内容。套件提供的结构化 .agents.md 文件可以让你的 AI 助手完全掌握代码库结构,减少重复说明,避免不必要的 Token 消耗。

使用权限

免费区块和组件支持个人项目、商业项目、SaaS 项目和客户交付项目使用。所有付费方案都提供完整源代码所有权,无需支付后续版税或按用户数计费,允许用于商业 SaaS 产品、内部工具和客户交付项目。Pro、Teams 和 Enterprise 方案还附赠完整配套的 Figma 设计套件。

评论

评论

还没有评论。成为第一个分享想法的人吧!