Component Gallery

This page renders every component available to a documentation author, once each. It is the visual regression check for the site: if something here looks wrong, it looks wrong everywhere.

All components are global. There is nothing to import into a page.

Notice

An inset callout for something the reader must not miss. Takes a tone and an optional title.

Available tones, and what each is for:

Tone	Use it for
`info`	context the reader needs but would not have looked for
`warning`	a foot gun that costs time
`risk`	data loss, money, or something irreversible
`success`	a confirmation, or the happy path after a hard step
`decision`	a fork in the road where the reader has to choose

The boxed variant adds a tone icon and a full border. Use it when the callout should read as a panel rather than an aside.

Full width, heavier than a notice, for a statement that governs the whole page rather than one paragraph.

Cards

A link grid. cols sets the column count.

Getting Started

Account, first site, first build, first deploy.

Key Concepts

Accounts, sites, content types, blueprints, members.

API and MCP

Keys, the REST surface, and both MCP transports.

Steps

A numbered sequence where order matters. Each Step takes a title.

First, do the thing

Steps carry their own body content, so each one can be a paragraph, a list, or a code block.

Then, do the next thing

If a procedure is not genuinely ordered, use a plain list instead. Numbering implies a dependency.

Finally, check it worked

End a sequence on something observable, so the reader knows whether to continue or go back.

Accordion

Collapsed detail. Good for troubleshooting and for answers most readers do not need.

Why is my site empty after a build?

Content defaults to draft, and a build skips drafts unless you turn on “Include draft posts in build”. Set the post to published and rebuild.

Why did my theme change not appear?

Nothing on the theme page is live until you rebuild and redeploy. Saving a file or setting a site default only changes what the next build will use.

Comparison

Two columns, before and after, for a change of state or a choice between two options. Content goes in the before and after slots.

Before. The left column. Use it for the current state, the old way, or the first of two options.

After. The right column. Use it for the new state, the better way, or the second option.

export type NavItem = {
	title: string;
	href?: string;
	items?: NavItem[];
};

export type NavSection = {
	label: string;
	collapsible?: boolean;
	items: NavItem[];
};

export const navigation: NavSection[] = [
	{
		label: 'Introduction',
		items: [
			{ title: 'Getting Started', href: '/docs/getting-started' },
			{ title: 'Key Concepts', href: '/docs/key-concepts' }
		]
	},
	{
		label: 'Guides',
		collapsible: true,
		items: [
			{ title: 'Sites and Settings', href: '/docs/sites-and-settings' },
			{ title: 'Posts, Pages, and Content Types', href: '/docs/content' },
			{ title: 'Themes and Blueprints', href: '/docs/themes-and-blueprints' },
			{ title: 'Media and Forms', href: '/docs/media-and-forms' },
			{ title: 'Bark and Distribution', href: '/docs/bark-and-distribution' },
			{ title: 'Publishing and Custom Domains', href: '/docs/publishing-and-domains' }
		]
	}
];

A short block has no toggle:

./deploy/docs-deploy.sh

House style

Two rules that apply to every page here.

No em dashes and no en dashes, anywhere: not in prose, not in headings, not in component props. Use a comma, a colon, parentheses, or a full stop. Write ranges as “5 to 10”.
Ground every claim in the code. If a capability cannot be verified in the repository, leave it out rather than describing what a CMS usually does.

Component Gallery

Notice

Banner

Cards

Steps

Accordion

Comparison

Badge

Media

Signature

Kbd

Code blocks

House style