Example Docs

Custom React Components

Extend your documentation with interactive React components.

Registering Components

Add components in your docs.config.ts:

import { MyChart } from "./app/components/my-chart";
import { InteractiveDemo } from "./app/components/demo";

export default defineDocs({
  components: {
    MyChart,
    InteractiveDemo,
  },
});

Using in MDX

Once registered, use them directly in your MDX files:

# My Page

Here's an interactive chart:

<MyChart data={[1, 2, 3, 4, 5]} />

And a live demo:

<InteractiveDemo />

Built-in Components

ComponentDescription
CalloutHighlighted information blocks
CardContent cards with links
StepsNumbered step-by-step guides
TabsTabbed content sections
AccordionCollapsible content sections

Component Variants

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

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