---
title: April 2026 - Component Composition
description: Composition sections across component pages—structured trees that help you and your agents build correct UI.
date: 2026-04-06
---

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.

```text
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:

```bash
npx shadcn@latest docs card
```

If you're using the [shadcn/skills](/docs/skills), this is done automatically for you.
