摘要
一句话总结 开源 UI 组件库 Shadcn 发布了全新的可视化项目构建工具，允许开发者在编写代码前通过“设计优先”的方式完成项目框架与视觉风格的深度定制。
核心要点
- 全新构建方式：推出可视化构建界面（
ui.shadcn.com/create），开发者配置完成后会自动生成包含所有参数的定制化npx shadcn create命令。 - 支持主流框架：该工具目前支持 Next.js、Vite 和 TanStack Start 框架。
- 深度视觉定制：支持在初始化前配置底层组件（Radix UI 或 Base UI）、视觉风格（如 Nova 预设）、主题色彩、图标库（如 Lucide）、字体及圆角值，并内置“随机生成”灵感功能。
- 工作流革新：颠覆传统脚手架先建项目后加样式的流程，将设计决策前置，大幅减少手动重复配置工作。
- 新旧命令并存：
shadcn create成为推荐的新项目创建起点，同时保留npx shadcn@latest init命令以便向现有项目中添加组件。 - 坚持代码所有权：延续 Shadcn 的核心理念，组件直接复制安装到项目代码库中，而非作为 npm 依赖，赋予开发者完全的控制与修改权限。
- 项目背景与热度：Shadcn 在 GitHub 已斩获超 10 万星标；新工具发布推文迅速获得超 9000 个点赞和 400 多条评论。
正文
广受欢迎的开源 UI 组件库 Shadcn 近日发布了一款全新的可视化项目构建工具。开发者现在可以通过 npx shadcn create 命令，采用“设计优先”的方式来创建新项目。该工具内置了完善的主题系统，并支持多种主流前端框架。
核心功能与可视化体验
通过 ui.shadcn.com/create 提供的可视化界面，开发者可以在编写第一行代码之前，完成整个项目的自定义配置。其核心在于提供对项目设计系统各个方面的实时预览与定制。
该工具支持 Next.js、Vite 和 TanStack Start 框架，并允许开发者进行以下深度配置：
- 组件基础：可选择 Radix UI 或 Base UI 作为底层组件。
- 视觉风格：提供多种风格选择，包括热门的 Nova 预设。
- 主题与色彩：自由配置基础颜色、主题、菜单颜色和强调色。
- 细节定制：选择 Lucide 等图标库，自定义字体和圆角值。
- 探索灵感：内置“随机生成”功能，可快速生成随机设计组合，帮助探索不同的视觉风格方向。
颠覆传统的初始化工作流
这款可视化构建器为创建 Shadcn 应用提供了全新方式。传统的脚手架工具（如 create-next-app 或 create-vite）通常要求在项目初始化后再手动添加样式和组件库。而 Shadcn 的新工具将这些决策前置，引导用户先选择框架并打开可视化构建器，在生成代码前确定所有设计方案，从而省去了以往需要手动完成的重复性配置工作。
当开发者对界面上的自定义配置满意后，系统会自动生成一条包含所有所选参数的定制化 shadcn create 命令。
根据最新的安装文档，shadcn create 已被确认为推荐的新项目创建起点。不过，传统的 npx shadcn@latest init 命令依然保留，可用于向现有的项目中添加 Shadcn。
坚持“代码所有权”的核心理念
可视化构建器的推出，与 Shadcn “开放代码所有权”的核心原则高度一致。与以 npm 包形式发行的传统组件库不同，Shadcn 以代码注册表的形式运作，组件是直接复制并安装到项目代码库中的，而非作为依赖项引入。
这种模式赋予了开发者完全的控制权。在 Reddit 的社区讨论中，有用户总结了 Shadcn 备受欢迎的原因：
- 即插即用与高度定制：组件可以根据自身需求随意修改。例如，有开发者在遇到组合框过滤功能的问题时，直接禁用了内置过滤，轻松替换成了另一个库。
- 强大的社区生态：得益于其极高的人气，当部分功能无法正常使用时，社区总能迅速提供替代方案或组件。
社区反响与项目背景
这一新工具作为 Shadcn 生态中最重要的新增功能之一，一经发布便引发了热烈反响。作者在 Twitter 上发布的公告推文迅速收获了超过 9000 个点赞和 400 多条评论。
Shadcn 是由 Vercel 的 shadcn 打造的开源组件分发平台。目前，该平台在 GitHub 上已斩获超过 10 万星标，并广泛支持 Next.js、React、Vue 和 Svelte 等多个框架。
相关文档
- shadcn-ui：可组合的前端组件与样式体系；关联理由：解说；说明：该档案页系统整理了 shadcn-ui 的定位与技术栈，可作为本文“新工具发布”事件的背景解读。