投稿 提交工具 投放合作

shadcn-ui-next:VS Code 的 shadcn/ui 代码片段

编程助手 117 7 TypeScript 2026-11-14 在 GitHub 打开

VS Code 扩展,通过 cn/cshadcn 触发的代码片段快速插入 shadcn/ui 组件的导入与 JSX。

shadcn-ui-next 是一个 VS Code 扩展(市场 ID 为 nrjdalal.shadcn-ui-next),在 jsx/tsx 文件中输入 `cn` 或 `shadcn` 即可列出可选的 shadcn/ui 组件片段。片段分四类:`cn-help` 显示用法说明,`cni-[component]` 插入组件的 import 语句,`cnx-[component]` 插入组件的 jsx/tsx 用法,`cnp-[component]` 插入表单等页面级组件。例如 Alert 组件用 `cni-alert` 加导入、`cnx-alert` 加用法。README 说明 Calendar、Combobox、Data Table、Date Picker、Toast 等需要 useState 的组件尚未加入。贡献方式是在 `src/components` 下按模板添加组件的 md 文件(导入、默认用法、变体之间用 `---` 分隔),再运行 `bun run generate` 生成片段。

Star 趋势2026-11-11 — 2026-11-13当前 Stars 117

11711-1111-1211-13