Write content

Write pages as MDX files in the project root. Each page should teach one clear task, concept, or reference topic.

Create a page

Add a file such as installation.mdx:

---
title: "Installation"
description: "Install the package and verify that it works."
---

This page explains how to install the package.

## Install

\`\`\`bash
npm install your-package
\`\`\`

Then add the page slug to site.config.ts:

navigation: {
  groups: [
    {
      group: "Start here",
      pages: ["index", "getting-started", "installation"],
    },
  ],
}

The slug is the file path without .mdx.

Frontmatter

Every page should include:

• title: The page heading and search result title.
• description: A short summary for search, metadata, and page previews.
• sidebarTitle: Optional shorter label for navigation.
• icon: Optional Lucide icon name for navigation.
• tag: Optional small navigation label.

Links

Use root-relative links for internal pages:

Read [Deploy to Vercel](/deploy-to-vercel).

Use full URLs for external pages:

Read the [Next.js documentation](https://nextjs.org/docs).

Built-in MDX components

Use components when they make the content easier to scan.

Open Component gallery to preview the full component set, including file trees, property tables, API blocks, do/don't blocks, zoomable media, language switchers, inline TOCs, prompts, and changelog updates.

Steps

Use steps for ordered workflows:

1. Open the file you want to edit.
2. Make one focused change.
3. Run npm run validate:docs and npm run type-check before you publish.

Tabs

Use tabs when readers need to choose one option:

npm install

Code blocks

Code fences support titles, line numbers, highlighting, focus, wrapping, and copy buttons:

export const siteConfig = {
  name: "Your Docs",
  shortName: "Docs",
};

Next step: Customize the site