mcpField
S
shadcn-ng

shadcn-ng

github.com/oguzhan18设计与 UI7152 次安装30 周前更新
代码仓库

关于 shadcn-ng

shadcn-ng 是面向 Angular 开发者的 shadcn/ui 移植版，组件采用 Tailwind CSS 样式。它提供可复制并自行定制的独立组件，以及用于初始化和添加组件的 CLI。

主要功能

  1. 01独立 Angular 组件
  2. 02Tailwind CSS 样式
  3. 03CLI 初始化与添加组件
  4. 04CSS 变量主题配置
  5. 05合并类名的 cn() 工具

适用场景

  1. 01启动 Angular 界面项目
  2. 02添加可复用界面组件
  3. 03定制组件样式与颜色

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/oguzhan18/angular-ecosystem-skills --skill shadcn-ng

安装后在 Claude Code 中输入/shadcn-ng确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

references/discussions/
_INDEX.md
references/docs/
_INDEX.md
references/issues/
_INDEX.md
references/releases/
_INDEX.md

详细介绍

unovue/shadcn-ng shadcn-ng

版本： 最新版（2025） 标签： Angular、Tailwind CSS、Radix Primitives

参考资料： 文档 — 安装、组件、主题 • GitHub Issues — 错误、解决方法 • GitHub Discussions — 问答、模式

API 变更

本节记录特定版本的 API 变更。

  • 新增：支持 Angular — shadcn-ng 是 shadcn/ui 的 Angular 移植版，提供使用 Tailwind CSS 设置样式的复制粘贴式组件

  • 新增：CLI 命令 — 使用 npx shadcn-ng@latest init 进行初始化，使用 npx shadcn-ng@latest add <component> 添加组件

  • 新增：独立组件 — 所有组件都是 Angular 独立组件，并包含适当的导入

  • 新增：cn 工具函数 — 使用 lib/utils.ts 中的 cn() 辅助函数合并 Tailwind CSS 类

  • 新增：CSS 变量主题 — 在 globals.css 中通过 CSS 变量配置颜色

最佳实践

  • 使用独立组件 — 所有 shadcn-ng 组件都是独立组件，可直接将其导入 imports 数组
import { Component } from "@angular/core";
import { UbButtonDirective } from "~/components/ui/button";

@Component({
  standalone: true,
  imports: [UbButtonDirective],
  // ...
})
export class ExampleComponent {}

  • 配置 Tailwind CSS — 按照官方安装指南设置 tailwindcss-animate、class-variance-authority、clsx 和 tailwind-merge

  • 使用 CSS 变量设置主题 — 在 globals.css 的 :root 中定义颜色，以实现动态主题

  • 将组件视为自己的代码 — 将组件复制到项目中，并根据需要进行自定义

  • 使用 registry 管理自定义组件 — 创建自己的 registry.json，以便在项目间共享和复用自定义组件

评论

支持 Markdown