Cards, steps and tabs
Use cards, steps and tabs to make documentation easier to follow.
Use components when they make instructions easier to follow. Keep ordinary explanations as paragraphs so the page does not become a collection of decorative boxes.
Choose the right structure
| Component | Good use |
|---|---|
| Cards | A small set of useful next destinations |
| Steps | A sequence that should be completed in order |
| Tabs | Alternatives such as language or package manager |
| Callout | Important context at the point it is needed |
| Summary | A short answer before a longer explanation |
Add the component
Current MDX pages include these components without extra framework imports. Copy a supported example from the component reference, keep blank lines around Markdown inside JSX and replace every sample link with a real destination.
Review before publishing
Check keyboard navigation, mobile wrapping and dark mode. Make sure a card title describes its destination and a tab label describes the choice. Keep essential instructions available as text rather than only in a picture or interactive demo.
Older projects may support different component names. Ask the agent to inspect the project before adapting an example.