shadcn-vue

Vue 3版本的Shadcn UI组件库(项目待启动)

前端开发 前端开发 写前端代码搭建设计系统调CSS样式 通用 更新于 2026-07-22

安装使用

复制下面这段提示词发给你的 AI(Claude / Cursor / TRAE / Codex / WorkBuddy 等),它会自动帮你完成安装:

帮我安装这个 AI Skill:shadcn-vue。
它的用途是:Vue 3版本的Shadcn UI组件库(项目待启动)
完整的 Skill 内容见:https://321skill.com/skills/shadcn-vue/raw/index.md
请读取该页面内容,如果是 SKILL.md 格式直接安装,如果是 README 提炼核心 prompt 后安装。

提示词包含完整的 Skill 内容链接,AI 读取后即可完成安装。你也可以 查看完整内容 确认无误。

使用示例

“帮我规划一下,如果我要启动这个 Shadcn UI Vue 项目,第一步应该做什么?需要考虑哪些技术选型?” 它会基于现有 README 信息和 Vue 生态现状,为你提供项目初始化、技术栈搭配(如 Vite、TypeScript、Radix Vue 集成)以及社区建设方面的初步建议。

介绍

Shadcn UI Vue 旨在为 Vue 3 开发者提供一个基于 Radix Vue 原语构建的、可自由定制和复制的现代化 UI 组件库。它解决了在 Vue 生态中快速构建美观、一致且易于维护的用户界面的需求,尤其适合那些希望拥有完全代码所有权和设计控制权的团队。

目前该项目尚未正式启动,处于寻找维护者和贡献者的阶段。如果项目成功启动,其使用方式将类似于原版 Shadcn UI,开发者可以通过命令行工具或手动方式,将所需的组件代码直接复制到自己的项目中,从而获得完全的控制权和定制能力。

它非常适合追求代码透明度、不希望被第三方 UI 库的运行时依赖和版本升级所束缚的 Vue 3 前端开发者或团队。对于希望从零开始构建一套符合自身设计系统,但又不想重复造轮子的项目来说,这是一个潜在的高质量起点。

与 Vuetify、Element Plus 等提供完整运行时包的传统 Vue UI 库不同,Shadcn UI 的理念是“复制粘贴”你的组件。这意味着你引入的是源代码而非编译后的包,因此没有版本锁定,可以随意修改,并与你的项目样式(如 Tailwind CSS)深度集成。Shadcn UI Vue 正是希望将这一优秀理念引入 Vue 生态。

核心特点

核心区别在于其“复制代码而非安装包”的理念,赋予开发者对组件代码的完全所有权和无限定制能力;同时,它专为 Vue 3 生态设计,旨在填补 Vue 领域类似 Shadcn/Radix 风格的高质量、无运行时依赖的 UI 方案空白。

注意事项

由于项目目前尚未启动,暂无实际可用的组件,不适合需要立即投入生产的项目。

常见问题

Shadcn UI Vue 现在可以用了吗?

还不能用,项目正在寻找负责人,尚未开始开发。

它和原版 Shadcn UI 是什么关系?

它是计划中的 Vue 3 版本移植,遵循相同的设计理念,但独立维护。

给 AI 助手的安装指引

如果你的 AI 编程助手(Claude Code、Cursor、TRAE 等)能看到这个页面,把下面这段发给它即可自动完成安装:

请访问 https://321skill.com/skills/shadcn-vue/raw/index.md 读取 shadcn-vue 的原始 Skill 定义(Markdown 格式),按其中说明在我的环境里完成安装和配置。