Composition sections across component pages—structured trees that help you and your agents build correct UI.

We've added Composition sections across the component docs so you can see the correct structure at a glance: what wraps what, which subcomponents belong together, and how to avoid invalid nesting.

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

Why we added this

We've found that LLMs and coding agents compose elements more reliably when they can see the full structure: fewer missing wrappers, fewer wrong hierarchies, better matches to the examples.

Bring docs into your agent

You or your LLM can pull the same component documentation, including composition, usage, and examples, into context from the CLI:

If you're using the shadcn/skills, this is done automatically for you.