Shadcn for Vue

基于shadcn/ui理念移植到Vue生态的无头组件库，提供一套可定制、可扩展的UI组件作为设计系统基础，所有代码开源且可通过CLI按需安装到项目中。

核心能力与组件覆盖

官网列出70+组件，涵盖从基础（Button、Badge、Input、Select）到复合（Data Table、Date Picker、Carousel、Chart）再到垂直场景（Message Scroller、Bubble、Sidebar）的完整体系。其中Message Scroller专门解决AI流式回复时的滚动跳跃问题，支持锚定对话轮次、跟随流式输出、恢复历史记录和跳转到指定消息。

• 组件数量：官网导航栏列出Accordion至Typography共70+个组件，持续新增中
• Bubble：聊天气泡组件，与Message Scroller配合使用
• Chart：内置图表组件，非第三方集成
• Blocks与Charts：提供预构建的页面区块和图表模板，可通过CLI直接添加

安装方式与框架适配

通过官方CLI（npx shadcn-vue@latest add）按需添加组件，支持Vite、Nuxt、Astro、Laravel四种主流Vue框架，也可手动安装。提供VSCode扩展（由@selemondev开发）支持在IDE内初始化CLI、安装组件、跳转文档和代码片段。

• CLI命令：npx shadcn-vue@latest add [组件名]，支持按需安装
• 框架支持：Vite、Nuxt、Astro、Laravel，覆盖主流Vue项目脚手架
• 手动安装：提供无CLI的纯手动安装方式

社区注册表与自定义注册表

CLI内置社区注册表功能，无需额外配置即可添加第三方组件。官方列出3个注册表：@shadcn（官方组件、区块、图表）、@inspira-ui（开源动画组件和效果）、@mapcn（地图组件）。同时支持用户运行自己的代码注册表，分发自定义组件、hooks、页面、配置等。

• 官方注册表：@shadcn，包含所有官方组件、Blocks和Charts
• MapCN：@mapcn，专注于地图组件，使用简单
• 自定义注册表：可通过CLI运行自己的registry，分发组件、hooks、配置等任意文件
• 安全提示：社区注册表由第三方维护，安装前需审查代码

设计系统与主题化能力

组件基于无头（headless）设计，提供完整的设计系统基础，支持通过components.json配置文件进行主题定制，内置暗黑模式、RTL布局、CSS变量主题系统。

• 无头设计：组件不强制样式，提供基础样式但允许完全覆盖
• CLI配置：components.json文件管理项目级主题和组件别名
• Figma支持：提供Figma设计文件（Legacy Docs中提及）

实用工具与生态集成

提供scroll-fade、shimmer等CSS工具类，以及表单集成（VeeValidate、TanStack Form）、MCP Server支持。社区注册表还包含@inspira-ui的动画组件和@mapcn的地图组件。

• 表单集成：支持VeeValidate和TanStack Form两种表单方案
• MCP Server：提供Model Context Protocol服务器支持
• 工具类：scroll-fade（滚动渐隐）、shimmer（闪烁效果）等CSS工具
• 社区扩展：@inspira-ui提供动画组件，@mapcn提供地图组件

常见问题

Q1：Shadcn for Vue 和原版 shadcn/ui 有什么区别？

A1：Shadcn for Vue 是原版 shadcn/ui（React）的Vue移植版，由unovue团队维护。核心概念一致：无头组件、CLI按需安装、开源可定制。但组件实现基于Vue 3 Composition API，并针对Vue生态做了适配，如支持Vite、Nuxt、Astro、Laravel等框架。

Q2：Message Scroller 组件解决了什么具体问题？

A2：Message Scroller 专为AI聊天应用设计，解决流式回复时整个聊天线程跳跃的问题。它提供锚定对话轮次、跟随流式输出、恢复历史记录和跳转到指定消息四个核心功能，官网demo展示了在AI流式回复时保持滚动位置稳定的效果。

Q3：如何添加社区注册表中的组件？

A3：使用CLI命令：npx shadcn-vue@latest add @registry/component。例如添加@inspira-ui的组件：npx shadcn-vue@latest add @inspira-ui/button。无需额外配置，CLI会自动从注册表拉取组件代码。

更多同类工具与网站,可在Vue分类继续挑选。

信息核实于 2026年7月,具体以官网为准。