定义

https://chatgpt.com/share/6a55fbe9-a63c-83ec-a345-f748d3ef6cd0

你记忆没错，这两个词其实都出现过，但是含义不一样，而且最近 shadcn 确实在往 Composition 这个词上统一。

以前的 Anatomy

Anatomy 这个词其实不是 shadcn 发明的，它最早在设计系统里很常见，例如：

Chakra UI —— Component Anatomy Adobe Spectrum —— Anatomy IBM Carbon —— Anatomy Material Design 的很多文档也会画组件 Anatomy

意思就是：

这个组件由哪些部件（Parts）组成。

例如一个 Dialog：

Dialog ├── Overlay ├── Content │ ├── Header │ ├── Body │ └── Footer └── CloseButton

这张图就是 Anatomy。

强调的是：

「长什么样，由哪些器官组成。」

现在为什么变成 Composition？

今年（2026 年 4 月）shadcn 专门发了一篇更新：

Component Composition

里面写得很明确：

他们开始在每个组件页面增加 Composition 章节。

例如 Card：

Card ├── CardHeader │ ├── CardTitle │ ├── CardDescription │ └── CardAction ├── CardContent └── CardFooter

官方解释也很直接：

我们发现 LLM 和 Coding Agent 在看到完整的组件结构之后，生成代码明显更稳定，更少出现缺失 Wrapper、层级错误等问题。

所以这里已经不是为了给设计师看的 Anatomy，而是为了：

告诉 AI 和开发者，这些组件应该怎么组合。

两个词到底区别是什么？

其实非常微妙。

Anatomy

回答的是：

What are the parts?

有哪些部件？

Card

Header Content Footer

强调组成。

Composition

回答的是：

How should these parts be composed?

这些部件应该怎么组合？

<Card> <CardHeader> <CardTitle /> </CardHeader>

<CardContent />

<CardFooter /> </Card>

强调使用方式。

举个更明显的例子：

Drawer：

Drawer ├── DrawerTrigger └── DrawerContent ├── DrawerHeader │ ├── DrawerTitle │ └── DrawerDescription └── DrawerFooter

官方现在标题就是：

Composition

因为这里不仅告诉你有哪些 Parts，还告诉你：

Trigger 必须放哪 Content 必须包哪些 Header 在哪里 Footer 在哪里

这是一个 Composition Tree。

为什么 shadcn 不继续叫 Anatomy？

从公开信息来看，有几个原因。

1）AI Friendly

这是官方自己写出来的。

Composition Tree 对 LLM 更容易理解：

Tabs ├── TabsList │ ├── TabsTrigger │ └── TabsTrigger ├── TabsContent └── TabsContent

AI 可以直接照着生成 JSX。

而 "Anatomy" 更偏概念，不强调父子关系。

2）React 社区一直在强调 Composition

React 官方这些年一直在讲：

Composition over inheritance

React 的世界里：

Compound Components Slot Children asChild render prop

其实都属于 Composition。

所以这个词跟 React 的哲学更加一致。

3）现在的 shadcn 已经把 "Composition" 当成核心理念

现在首页介绍里面，Composition 已经被列成五大原则之一：

Open Code Composition Distribution Beautiful Defaults AI Ready

官方的定义是：

Every component uses a common, composable interface.

可以看到，它已经不是一个文档章节，而是整个设计哲学。

我自己的理解

如果你在设计自己的组件系统，我会建议把这两个概念区分开：

名称 回答的问题 内容 Anatomy 它由什么组成？ Parts、Slots、区域划分 Composition 应该怎么拼起来？ JSX Tree、父子关系、合法嵌套 API 每个部分怎么用？ Props、Events、Variants Examples 实际怎么写？ Demo、最佳实践

很多成熟设计系统都会同时有 Anatomy 和 Composition 两层文档。

而 shadcn 最近的变化，并不是否定 Anatomy，而是把重点放到了 Composition Tree 上，因为这既更符合 React 的设计思想，也更利于 AI 和开发者正确使用组件。