shadcn/ui Create - 可视化主题定制工具

shadcn/ui 推出了全新的主题创建工具，让开发者可以从零开始自定义设计系统。通过可视化的界面，你可以选择组件库、字体、配色方案等，快速构建符合项目需求的 UI 组件库。

核心功能

组件库选择

shadcn/ui 支持多种底层组件库：

• Radix UI - 无障碍优先的底层组件库
• React Aria - Adobe 开源的 React 组件库
• Base UI - Material UI 团队开发的底层组件库

样式风格

提供多种预设样式风格：

• Default - 经典默认风格
• New York - 现代简约风格
• Lyra - 优雅精致风格

主题定制

支持全面的主题配置选项：

• Base Color - 基础中性色（Neutral、Gray、Zinc、Stone、Slate）
• Theme Color - 主题强调色（Red、Orange、Amber、Yellow、Green、Teal、Blue、Indigo、Purple、Pink）
• Font - 字体选择（Inter、Geist、Manrope、JetBrains Mono 等）
• Radius - 圆角大小（None、Small、Medium、Large、Full）
• Icon Library - 图标库（Lucide、Radix Icons）

菜单样式

• Menu Color - 菜单颜色（Default、Muted）
• Menu Accent - 菜单强调样式（Default、Subtle）

支持框架

创建的项目支持主流前端框架：

• Next.js - React 全栈框架
• Vite - 快速构建工具
• TanStack Start - 全栈 React 框架
• v0 - Vercel 的 AI 生成工具

使用流程

1. 访问 shadcn/ui Create
2. 选择组件库和样式风格
3. 配置主题颜色和字体
4. 调整圆角和菜单样式
5. 预览组件效果
6. 导出项目配置或直接在 v0 中打开

组件预览

工具提供了丰富的组件预览功能，包括：

• Blocks - 页面区块（Home、Elevenlabs、GitHub、Vercel、ChatGPT 等模板）
• Components - 基础组件（Accordion、Alert、Button、Card、Dialog、Dropdown 等 50+ 组件）

特色功能

随机主题

点击 Shuffle 按钮可以随机生成主题配置，快速探索不同的设计组合。

锁定配置

每个配置项都可以单独锁定，在随机切换时保持特定配置不变。

实时预览

所有配置更改都会实时反映在预览区域，即时查看组件效果。

分享配置

可以通过 URL 分享当前的主题配置，方便团队协作。

项目创建

配置完成后，可以通过以下方式创建项目：

1. Create Project 按钮 - 下载配置好的项目模板
2. Open in v0 - 直接在 Vercel v0 中打开并继续开发

适用场景

• 快速搭建新项目的设计系统
• 为现有项目创建自定义主题
• 探索不同的 UI 设计组合
• 团队协作统一设计规范
• 学习现代 UI 组件库的最佳实践

总结

shadcn/ui Create 是一个强大的主题定制工具，它将组件库选择、样式配置和项目生成整合在一个直观的界面中。无论是快速原型开发还是构建生产级应用，都能显著提升开发效率和设计一致性。