shadcn-ng

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

unovue/shadcn-ng

shadcn-ng

unovue/shadcn-ng

shadcn-ng

Version: Latest (2025) Tags: Angular, Tailwind CSS, Radix Primitives

References: Docs — installation, components, theming • GitHub Issues — bugs, workarounds • GitHub Discussions — Q&A, patterns

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

参考资料： 文档 — 安装、组件、主题配置 • GitHub Issues — 漏洞、临时解决方案 • GitHub Discussions — 问答、使用模式

API Changes

API 变更

This section documents version-specific API changes.

NEW: Angular support — shadcn-ng is the Angular port of shadcn/ui, providing copy-paste components styled with Tailwind CSS
NEW: CLI commands — Use
```
npx shadcn-ng@latest init
```
for initialization and
```
npx shadcn-ng@latest add <component>
```
for adding components
NEW: Standalone components — All components are Angular standalone components with proper imports
NEW:
```
cn
```
utility — Use the
```
cn()
```
helper from
```
lib/utils.ts
```
to merge Tailwind CSS classes
NEW: CSS variables theming — Configure colors via CSS variables in
```
globals.css
```

本部分记录对应版本的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变量调整颜色配置

Best Practices

最佳实践

Use standalone components — All shadcn-ng components are standalone, import them directly in
```
imports
```
array

import { Component } from "@angular/core";
import { UbButtonDirective } from "~/components/ui/button";

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

Configure Tailwind CSS — Follow the official installation guide to set up tailwindcss-animate, class-variance-authority, clsx, and tailwind-merge
Use CSS variables for theming — Define colors in
```
:root
```
in your globals.css for dynamic theming
Treat components as your own code — Copy components into your project and customize as needed
Use registry for custom components — Create your own registry.json to share and reuse custom components across projects

使用独立组件 — 所有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.json，可跨项目共享和复用自定义组件