shadcn-code-review

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

shadcn/ui Code Review

shadcn/ui 代码审查

Quick Reference

快速参考

Issue Type	Reference
className in CVA, missing VariantProps, compound variants	references/cva-patterns.md
asChild without Slot, missing Context, component composition	references/composition.md
Missing focus-visible, aria-invalid, disabled states	references/accessibility.md
Missing data-slot, incorrect CSS targeting	references/data-slot.md

问题类型	参考文档
CVA中的className、缺失VariantProps、复合变体	references/cva-patterns.md
未使用Slot的asChild、缺失Context、组件组合	references/composition.md
缺失focus-visible、aria-invalid、disabled状态	references/accessibility.md
缺失data-slot、CSS目标选择错误	references/data-slot.md

Review Checklist

审查检查清单

```
cn()
```
receives className, not CVA variants
```
VariantProps<typeof variants>
```
exported for consumers
Compound variants used for complex state combinations
```
asChild
```
pattern uses
```
@radix-ui/react-slot
```
Context used for component composition (Card, Accordion, etc.)
```
focus-visible:
```
states, not just
```
:focus
```
```
aria-invalid
```
,
```
aria-disabled
```
for form states
```
disabled:
```
variants for all interactive elements
```
sr-only
```
for screen reader text
```
data-slot
```
attributes for targetable composition parts
CSS uses
```
has()
```
selectors for state-based styling
No direct className overrides of variant styles

```
cn()
```
接收className，而非CVA变体
导出
```
VariantProps<typeof variants>
```
供使用者调用
复合变体用于复杂状态组合
```
asChild
```
模式使用
```
@radix-ui/react-slot
```
Context用于组件组合（如Card、Accordion等）
使用
```
focus-visible:
```
状态，而非仅
```
:focus
```
表单状态使用
```
aria-invalid
```
、
```
aria-disabled
```
所有交互元素都有
```
disabled:
```
变体
屏幕阅读器文本使用
```
sr-only
```
可组合部件使用
```
data-slot
```
属性
CSS使用
```
has()
```
选择器实现基于状态的样式
不直接覆盖变体样式的className

Valid Patterns (Do NOT Flag)

有效模式（无需标记）

These are correct patterns that should NOT be flagged as issues:

```
max-h-(--var)
```
- correct Tailwind v4 CSS variable syntax (NOT v3 bracket notation)
```
text-[color:var(--x)]
```
- valid arbitrary value syntax
Copying shadcn component code into project - intended usage pattern
Not documenting copied shadcn components - library internals, not custom code
Using cn() with many arguments - composition is the pattern
Conditional classes in cn() arrays - valid Tailwind pattern
Extending primitive components without additional docs - well-known base

以下为正确模式，不应标记为问题：

```
max-h-(--var)
```
- 正确的Tailwind v4 CSS变量语法（非v3括号表示法）
```
text-[color:var(--x)]
```
- 有效的任意值语法
将shadcn组件代码复制到项目中 - 预期使用模式
未对复制的shadcn组件编写文档 - 属于库内部实现，非自定义代码
```
cn()
```
使用多个参数 - 符合组合模式
cn()数组中的条件类 - 有效的Tailwind模式
扩展原语组件且未添加额外文档 - 属于知名基础组件

Context-Sensitive Rules

上下文敏感规则

Apply these rules with appropriate context awareness:

Flag accessibility issues ONLY IF not handled by Radix primitives underneath
Flag missing aria labels ONLY IF component isn't using accessible radix primitive
Flag variant proliferation ONLY IF variants could be composed from existing
Flag component documentation ONLY IF it's custom code, not copied shadcn

应用以下规则时需结合适当的上下文：

仅当底层Radix primitives未处理时，才标记可访问性问题
仅当组件未使用可访问的Radix原语时，才标记缺失aria标签的问题
仅当变体可通过现有变体组合实现时，才标记变体冗余问题
仅当为自定义代码时，才标记组件文档缺失问题，复制的shadcn组件无需标记

Library Convention Note

库约定说明

shadcn/ui components are designed to be copied and modified. Code review should focus on:

Custom modifications made to copied components
Integration with application state/data
Accessibility in custom usage contexts

Do NOT flag:

Standard shadcn component internals
Radix primitive usage patterns
Default variant implementations

shadcn/ui组件设计为可复制和修改。代码审查应聚焦于：

对复制组件所做的自定义修改
与应用状态/数据的集成
自定义使用场景下的可访问性

请勿标记：

标准shadcn组件内部实现
Radix原语使用模式
默认变体实现

When to Load References

何时加载参考文档

Reviewing variant definitions → cva-patterns.md
Reviewing component composition with asChild → composition.md
Reviewing form components or interactive elements → accessibility.md
Reviewing multi-part components (Card, Select, etc.) → data-slot.md

审查变体定义 → cva-patterns.md
审查使用asChild的组件组合 → composition.md
审查表单组件或交互元素 → accessibility.md
审查多部件组件（如Card、Select等） → data-slot.md

Review Questions

审查问题

Are CVA variants properly separated from className props?
Does asChild composition work correctly with Slot?
Are all accessibility states (focus, invalid, disabled) handled?
Are data-slot attributes used for component part targeting?
Can consumers extend variants without breaking composition?

CVA变体是否与className属性正确分离？
asChild组合是否与Slot配合正常工作？
所有可访问性状态（焦点、无效、禁用）是否已处理？
是否使用data-slot属性定位组件部件？
使用者能否扩展变体而不破坏组合？

Before Submitting Findings

提交发现前的步骤

Load and follow review-verification-protocol before reporting any issue.

在报告任何问题前，请加载并遵循审查验证协议。