Shadcn这款广受欢迎的开源UI组件工具，最近推出了一款可视化项目构建工具，用户可以通过npx shadcn create命令来使用它。该工具提供了完善的主题设置、框架支持，并采用以设计为导向的方法来帮助用户搭建新项目。
ui.shadcn.com/create页面上的可视化界面让开发者能够在编写任何代码之前，就自定义整个项目的配置。该工具支持Next.js、Vite以及TanStack Start等框架，并允许用户全面配置主题、组件库、图标集和设计系统。
该工具的一个关键特点就是能够实时预览并自定义项目设计系统的各个方面。开发者可以选择Radix UI或Base UI作为组件基础，从多种视觉风格中挑选样式（包括流行的Nova预设），配置基础颜色和主题，选择Lucide等图标库，自定义字体和边框半径值，以及调整菜单颜色和点缀元素。该界面还提供了随机生成设计组合的功能，帮助开发者快速探索不同的设计方向。
该工具会引导用户完成框架选择，并打开可视化构建工具，在代码生成之前让用户进行所有自定义设置。这种做法与create-next-app或create-vite等传统的项目搭建工具不同——后者的样式设置和组件库通常是在项目初始化之后才添加的。通过提前完成这些配置，可视化构建工具避免了开发者以往需要手动进行的重复性工作。当开发者对自定义结果满意后，系统会生成一个包含其所选所有自定义参数的shadcn create命令。
可视化构建工具是shadcn生态系统中最重要的新增功能之一。它支持合理的设计系统配置，并提供组件级别的预览功能，让开发者能够在编写代码之前就确定设计方案，从而更快地创建出完整的shadcn应用程序。
init工作流程的开发者来说，安装文档明确指出，shadcn create确实是新项目的推荐起点；不过，对于现有项目而言，仍然可以使用传统的npx shadcn@latest init命令来添加shadcn组件。可视化构建工具的设计理念与shadcn所坚持的“开放代码所有权”这一核心原则是一致的。与作为npm包分发的组件库不同，shadcn组件是直接被复制到项目代码库中的，因此开发者能够对其拥有完全的控制权。这一做法曾在Reddit上引发过讨论：有用户质疑shadcn的受欢迎程度，但有人总结出了其原因：
Shadcn提供的组件可以直接使用，因此你可以根据自己的需求对它们进行定制。例如，我们在使用组合框进行过滤时遇到了问题，于是我就禁用了内置的过滤功能，转而使用了另一个库来替代它。
另一个优点是，由于Shadcn非常受欢迎，当某些功能无法正常使用时，社区会提供其他的解决方法或替代组件。
在Twitter上，作者发布的公告帖子引发了巨大的反响，获得了超过9000个赞，并有400多条评论。
Shadcn是一个由shadcn团队在Vercel平台上开发的开源组件分发平台。与传统组件库不同，它实际上是一个代码注册系统——组件可以直接被安装到项目中，而无需作为依赖项导入。目前，这个平台在GitHub上已经获得了超过10万的星标支持，并且兼容Next.js、React、Vue和Svelte等多种开发框架。