Docs
MDX

MDX

Using MDX with shadcn/ui components.

MDX

MDX is a powerful way to write content with components. It's a combination of Markdown and React.

Available Components

shadcn/ui provides a wide range of components that you can use directly in your MDX files. Here are some commonly used components:

Documentation Components

  • ComponentPreview - Displays live component previews
  • ComponentSource - Shows component source code
  • Steps - Creates step-by-step guides
  • Callout - Highlights important information
  • CodeTabs - Organizes code examples in tabs
  • TabsList and TabsTrigger and TabsContent - Creates tabbed interfaces
  • Codeblock - Displays code blocks

ComponentPreview

The ComponentPreview component displays live, interactive examples of your components. It provides a sandbox environment where users can see the component in action.

<ComponentPreview
  name="button-demo"
  description="A collection of button variants"
  className="[&_button]:mr-2"
/>

ComponentSource

The ComponentSource component shows the source code of a component with syntax highlighting.

<ComponentSource name="hello-world" />

Steps

The Steps component creates structured, numbered step-by-step guides.

<Steps>
  <Step>Install the dependencies</Step>
  <Step>Import the component</Step>
  <Step>
    Add it to your code: ```tsx
    <Button>Click me</Button>
    ```
  </Step>
</Steps>

Install the following dependencies:

pnpm add @radix-ui/react-accordion

Copy and paste the following code into your project.

import { HelloWorld } from "@/components/ui/hello-world"
 
export interface HelloWorldProps {}
 
export function HelloWorldDemo(props: HelloWorldProps) {
  return <HelloWorld />
}

Update the import paths to match your project setup.

Callout

The Callout component highlights important information, warnings, or tips.

<Callout>This is an important note about usage.</Callout>
 
<Callout type="warning">Be careful when modifying these settings.</Callout>

CodeTabs

The CodeTabs component organizes different code examples or installation methods in tabs.

<CodeTabs>
  <TabsList>
    <TabsTrigger value="npm">npm</TabsTrigger>
    <TabsTrigger value="yarn">yarn</TabsTrigger>
    <TabsTrigger value="pnpm">pnpm</TabsTrigger>
  </TabsList>
  <TabsContent value="npm">```bash npm install @radix-ui/react-tabs ```</TabsContent>
  <TabsContent value="yarn">```bash yarn add @radix-ui/react-tabs ```</TabsContent>
  <TabsContent value="pnpm">```bash pnpm add @radix-ui/react-tabs ```</TabsContent>
</CodeTabs>
pnpm dlx shadcn@latest add accordion

Codeblock

The Codeblock component displays code blocks with syntax highlighting.

Example
// 33% of the carousel width.
<Carousel>
  <CarouselContent>
    <CarouselItem className="basis-1/3">...</CarouselItem>
    <CarouselItem className="basis-1/3">...</CarouselItem>
    <CarouselItem className="basis-1/3">...</CarouselItem>
  </CarouselContent>
</Carousel>
InstallationChangelog