Reference

Component gallery

Preview every bundled MDX component with dummy content and sample states.

Updated May 11, 2026

Use this page to inspect the starter's built-in MDX components. The examples use placeholder data so you can safely edit, copy, or delete them later.

Badges and icons

Use badges inline when a short status helps readers scan.

Default Beta Ready Needs review Deprecated Disabled

Use the public icon component for inline visual labels: .

Callouts

Cards, tiles, and columns

QuickstartGuide

A linked card for a common first step.

Start hereSettingsConfig

A linked card for customization.

Plain cardNote

A non-linked card can summarize a concept.

Horizontal card

Horizontal cards can pair a small image with a title, body copy, and call to action.

Read the setup guide
Writing guide

A compact linked tile for related pages.

Open guideReference demo

A smaller target for API-style examples.

Deployment

A tile can fit inside the same column grid.

Left column

Put ordinary Markdown inside a Column when you want custom column content.

Right column

Columns stack on smaller screens.

Steps

  1. Create a page

    Create or edit an .mdx page.

  2. Add navigation

    Add the page slug to site.config.ts.

  3. Preview locally

    Run npm run dev and check the page locally.

Accordions and expandable details

What should go in an accordion?Use this for optional details.

Optional details, long explanations, or extra troubleshooting notes.

Can accordions contain Markdown?

Yes. You can include bold text, links, lists, and code snippets.

More sample details

This expandable block is useful for information that should not interrupt the main flow.

  • It can include lists.
  • It can include inline code.
  • It can include links.

Tabs and code groups

Install with pnpm
pnpm install
pnpm dev

Use generated API pages when you already have OpenAPI or AsyncAPI files.

Code blocks

Highlighted config
export const demoConfig = {
  name: "Demo Docs",
  theme: "system",
  features: {
    search: true,
    assistant: false,
  },
};
Diff example
- oldTitle: "Untitled"
+ title: "Component gallery"
+ description: "Preview the built-in components."
Expandable code example
<Card title="Example" href="/getting-started">
  This code block is intentionally longer than the others so you can inspect the expandable styling. Add your own snippets here when you need a compact reference.
</Card>
Build
npm run build
Starter flow

Rendering diagram...

Panels, banners, and updates

Demo panel

Panels can frame a short concept, checklist, or grouped note. On wide screens, panel content also appears in the right rail.

Frames and images

Blue documentation icon
Dummy frame using the starter logo mark.Use `hint` for a short supporting note.
Click the media to inspect it in a larger overlay.

Inline TOC and do/don't

Use inline TOCs when a long guide needs a local jump list inside the main article.

Use do/don't blocks to compare preferred and discouraged patterns.

Do

Explain the task before listing the steps, then use concrete commands.

Don't

Start with product-specific assumptions that a generic starter cannot know.

Type and property tables

Use type tables for props, options, metadata fields, and JSON object shapes.

Page frontmatter
PropertyTypeDescription
titleRequiredstring

Displayed as the page heading and browser title.

descriptionRequiredstring

Used in search, metadata, and llms.txt summaries.

tagOptionalstring

Adds a small label beside the page in navigation.

API-style fields

GETList demo pages
https://api.example.com/v1/demo-pages

Auth: Bearer tokenOpen playground

projectIdstringpathpathRequired

The unique ID for the example project.

includeDraftsbooleanquerydefault: falseOptional

Set this to true to include draft pages in a sample response.

Authorizationstringheaderplaceholder: Bearer tokenRequired

Send an access token with the example request.

titlestringRequired

The display title for the documentation page.

legacyIdstringDeprecated

The old identifier remains in sample data for migration examples.

Create page request

Sample request
{
  "projectId": "demo_123",
  "includeDrafts": false
}

Create page response

Sample response
{
  "id": "page_getting_started",
  "title": "Getting started",
  "status": "ready"
}

Color, prompt, tooltip, tree, view, and visibility

Ink#1d1d1dPrimary text color.
Surface#ffffffBase page surface.
Accent#0f766eExample custom accent.
Docs promptCursor

Copy this prompt into your AI coding tool.

Write a concise release note for the latest documentation starter update.

This sentence has a tooltipThis is helper text shown on hover or focus. in the middle.

  • docs
    • component-gallery.mdx
    • reference-demo.mdx
  • site.config.ts
Writer

Use this view for content authors who only need page and navigation files.

Developer

Use this view for component, API route, and build-system work.

This human-only note renders on the web page and is omitted from generated Markdown.

Standard Markdown

TypeExample
Inline codesite.config.ts
LinkDeploy to Vercel
Strong textImportant label

This is a plain Markdown blockquote.

  • Task lists work through GitHub-flavored Markdown.
  • Replace demo copy before publishing.

Unsupported component fallback

Next step: Reference demo

Was this page helpful?