MDX Components

A library of custom MDX components available in all documentation pages. These are automatically registered in the docs rendering pipeline.

Callout

Use callouts to highlight important information.

<Callout type="info" title="Info">
  This is an informational callout.
</Callout>

<Callout type="warning" title="Warning">
  Be careful with this operation.
</Callout>

<Callout type="tip" title="Tip">
  Here's a helpful suggestion.
</Callout>

Types: info, warning, tip, error

Badge

Display version or status indicators.

<Badge text="New" variant="success" />
<Badge text="Experimental" variant="warning" />
<Badge text="Deprecated" variant="error" />

Props:

Prop	Type	Description
`text`	`string`	Badge label
`variant`	`'success' \| 'warning' \| 'error' \| 'info'`	Color variant

Steps

Wrap ordered lists for step-by-step instructions.

<Steps>
1. **First step**

   Description of first step.

2. **Second step**

   Description of second step.
</Steps>

FileTree

Display file and directory structures.

<FileTree>
- src/
  - components/
  - pages/
    - index.astro
    - **[theme].astro**
- package.json
</FileTree>

Bold items with ** are highlighted. Use - for list items.

CardGrid & LinkCard

Display linked cards in a responsive grid.

<CardGrid>
  <LinkCard
    title="Getting Started"
    description="Set up your project in minutes."
    href="/docs/en/getting-started/installation"
  />
  <LinkCard
    title="Theming"
    description="Learn about the theme system."
    href="/docs/en/core-concepts/theming"
  />
</CardGrid>

LinkCard Props:

Prop	Type	Description
`title`	`string`	Card title
`description`	`string`	Card description
`href`	`string`	Link destination

CodeTabs

Display tabbed code blocks for multiple package managers or languages.

<CodeTabs labels={['pnpm', 'npm', 'yarn']}>
```bash
pnpm install
```
```bash
npm install
```
```bash
yarn install
```
</CodeTabs>

Props:

Prop	Type	Description
`labels`	`string[]`	Tab labels displayed above each code block

ℹ️

Code Blocks

Place each code block as a direct child. The number of code blocks must match the number of labels.

PropsTable

Display component prop documentation in a formatted table.

<PropsTable component="Hero" />

ApiMethod

Document a function or method signature.

<ApiMethod name="useTranslations" params="locale: Locale" returns="(key: string) => string" />