MDX components | Cybooks

Admonitions

Use admonitions for short callouts. Prefer them over long paragraphs of warnings.

Note

Keep notes short: one idea, one recommendation.

Steps

Use steps when order matters.

1
Do the smallest viable thing
Keep each step focused on a single action and show the command or snippet.
2
Verify the result
Prefer a concrete “what to look for” instead of a generic “it should work”.

Cards and grids

Use cards to link to related pages without writing large “Next steps” paragraphs.

Installation

Set up the project locally and run the dev server.

Read installation

Data fetching

Patterns for loading data in a Next.js app.

Read data fetching

Code tabs

Use code tabs when you show the same idea in different languages.

type User = { id: string; name: string };

Tabs

Use tabs when you want to present multiple approaches without duplicating the whole page. Tabs work best for short, explanatory content.

Tabs are great for comparing alternatives, like server-first vs client-first approaches, or different configuration strategies.

Accordions

Use accordions for optional details that would otherwise interrupt the main flow of a page.

If a step fails, copy the exact command output and verify you are using the recommended Node.js version.

Tables

Use tables for compact comparisons. Always add a short paragraph before the table so readers know what the table is answering.

Component	Best for	Avoid when
`Steps`	Ordered workflows	There is no required order
`Grid` + `Card`	Navigation and “next steps”	You need long prose explanations
`Admonition`	Short callouts	The “callout” becomes the main article

FileSystem

Use FileSystem to illustrate folder layout and highlight the file the reader should edit.

src/content/docs

meta.json

content

mdx-components.md

Package manager blocks

If you want to show an install command once and render it for different package managers, use an npm code block.

npm install next react react-dom