npm install @mdxui/shadcn

import { MDXProvider, components } from '@mdxui/shadcn'
 
function App() {
  return (
    <MDXProvider components={components}>
      <MDXContent />
    </MDXProvider>
  )
}

# Heading 1
## Heading 2
### Heading 3
 
Regular paragraph text with **bold** and *italic*.
 
> Blockquote with styled border.
 
- Unordered list item
- Another item
 
1. Ordered list item
2. Another item

\`\`\`typescript
const greeting = 'Hello, World!'
console.log(greeting)
\`\`\`

<Callout>
  Default informational callout.
</Callout>
 
<Callout type="warning">
  Warning callout with yellow styling.
</Callout>
 
<Callout type="error">
  Error callout with red styling.
</Callout>
 
<Callout type="success">
  Success callout with green styling.
</Callout>

<Tabs defaultValue="npm">
  <TabsList>
    <TabsTrigger value="npm">npm</TabsTrigger>
    <TabsTrigger value="pnpm">pnpm</TabsTrigger>
    <TabsTrigger value="yarn">yarn</TabsTrigger>
  </TabsList>
  <TabsContent value="npm">
    ```bash
    npm install package
    ```
  </TabsContent>
  <TabsContent value="pnpm">
    ```bash
    pnpm add package
    ```
  </TabsContent>
  <TabsContent value="yarn">
    ```bash
    yarn add package
    ```
  </TabsContent>
</Tabs>

<Cards>
  <Card href="/docs/getting-started">
    <CardHeader>
      <CardTitle>Getting Started</CardTitle>
      <CardDescription>
        Learn how to set up your project.
      </CardDescription>
    </CardHeader>
  </Card>
  <Card href="/docs/api">
    <CardHeader>
      <CardTitle>API Reference</CardTitle>
      <CardDescription>
        Explore the full API documentation.
      </CardDescription>
    </CardHeader>
  </Card>
</Cards>

<Accordion type="single" collapsible>
  <AccordionItem value="item-1">
    <AccordionTrigger>Is it accessible?</AccordionTrigger>
    <AccordionContent>
      Yes. It adheres to the WAI-ARIA design pattern.
    </AccordionContent>
  </AccordionItem>
  <AccordionItem value="item-2">
    <AccordionTrigger>Is it styled?</AccordionTrigger>
    <AccordionContent>
      Yes. It comes with default styles using Tailwind CSS.
    </AccordionContent>
  </AccordionItem>
</Accordion>

<Steps>
  <Step title="Install dependencies">
    Run `npm install @mdxui/shadcn` to install the package.
  </Step>
  <Step title="Configure your project">
    Add the MDXProvider to your app root.
  </Step>
  <Step title="Start building">
    Use the components in your MDX files.
  </Step>
</Steps>

import { MDXProvider, createComponents } from '@mdxui/shadcn'
 
const components = createComponents({
  theme: {
    code: {
      theme: 'github-dark',
      showLineNumbers: true,
    },
    callout: {
      icons: true,
    },
  },
})
 
<MDXProvider components={components}>

import { MDXProvider, components as defaultComponents } from '@mdxui/shadcn'
import { CustomCodeBlock } from './components'
 
const components = {
  ...defaultComponents,
  pre: CustomCodeBlock,
  h1: ({ children }) => (
    <h1 className="scroll-m-20 text-4xl font-extrabold">
      {children}
    </h1>
  ),
}
 
<MDXProvider components={components}>

// app/docs/[[...slug]]/page.tsx
import { MDXProvider, components } from '@mdxui/shadcn'
import { getMDXContent } from '@/lib/mdx'
 
export default async function Page({ params }) {
  const { content } = await getMDXContent(params.slug)
 
  return (
    <MDXProvider components={components}>
      <article className="prose prose-neutral dark:prose-invert">
        {content}
      </article>
    </MDXProvider>
  )
}

import { DocsPage, DocsBody } from '@mdxui/fumadocs'
import { components } from '@mdxui/shadcn'
 
export default function Page({ page }) {
  return (
    <DocsPage>
      <DocsBody>
        <page.data.body components={components} />
      </DocsBody>
    </DocsPage>
  )
}

// tailwind.config.js
module.exports = {
  content: [
    './node_modules/@mdxui/shadcn/**/*.{js,ts,jsx,tsx}',
    // ... your content paths
  ],
}

import { ThemeProvider } from 'next-themes'
import { MDXProvider, components } from '@mdxui/shadcn'
 
function App({ children }) {
  return (
    <ThemeProvider attribute="class">
      <MDXProvider components={components}>
        {children}
      </MDXProvider>
    </ThemeProvider>
  )
}

:root {
  --mdx-code-background: hsl(0 0% 98%);
  --mdx-code-foreground: hsl(0 0% 10%);
  --mdx-callout-info: hsl(200 80% 95%);
  --mdx-callout-warning: hsl(40 80% 95%);
  --mdx-callout-error: hsl(0 80% 95%);
}
 
.dark {
  --mdx-code-background: hsl(0 0% 10%);
  --mdx-code-foreground: hsl(0 0% 98%);
}