Writing a note
How to add a page, order the sidebar, and use every component available in these docs.
Add a page
Create an MDX file
Pages live in content/docs/. The file path is the URL:
content/docs/tooling/pnpm.mdx becomes /docs/tooling/pnpm.
---
title: Vite
description: One sentence that shows under the title and in search results.
icon: Zap
---
Start writing here. Use ## for sections; they show up in the page outline.icon is any Lucide icon name in PascalCase.
Add it to the folder's meta.json
{
"title": "Tooling",
"icon": "Wrench",
"defaultOpen": true,
"pages": ["biome-ultracite", "pnpm", "vite"]
}pages sets the sidebar order. Leave index out: the folder's index.mdx
becomes the page the folder name links to.
New section? Add a folder
Create a folder with its own meta.json and an index.mdx overview, then
add the folder name to content/docs/meta.json. To show it as a card on the
home page, add it to SECTIONS in src/lib/sections.ts.
Components
Everything below works in any .mdx file without an import.
Callouts
Default (info)
Idea
Warning
Error
Success
<Callout type="warn" title="Warning">Something that will bite you.</Callout>Code blocks
Add a title, and highlight lines with a // [!code highlight] comment:
const staleTime = 1000 * 60 * 5;Show a diff with // [!code ++] and // [!code --]:
placeholderData: keepPreviousData,
keepPreviousData: true,Group code blocks into tabs by giving each one a tab name:
pnpm add @tanstack/react-queryTabs
<Tabs items={['Server state', 'Client state']}>
<Tab value="Server state">TanStack Query.</Tab>
<Tab value="Client state">Zustand.</Tab>
</Tabs>Steps
Wrap <Step> blocks in <Steps>, and start each step with a ### heading.
This page's "Add a page" section uses them.
Accordions
Cards
Files
Use <Files>, <Folder> and <File> to draw a folder tree, like the one
under "Add a page".
Writing style
- Write from real work. If it didn't happen in a project, it doesn't go here.
- Lead with the rule or the fix, then the reason.
- Keep code snippets short. Mark them "(simplified)" when they are.
- Link to the blog post when there's a longer story behind the note.
- Don't name unlaunched client projects; describe them instead.
Last updated on