/>
MDX UI
$ init

Introduction

Copy-paste MDX components for documentation sites

What is mdx-ui?

mdx-ui is a collection of 29 ready-to-use MDX components for documentation sites. Components are copied directly into your project — not installed as a dependency — so you own the code and can modify it freely.

Built with React, TypeScript, and Tailwind CSS. Inspired by shadcn/ui.

Quick Start

1. Initialize your project

npx @ravikumarsurya/mdx-ui init

This creates mdx-ui.json, injects CSS variables into your globals.css, and patches tailwind.config if needed. Works with Tailwind v3 and v4.

2. Add components

npx @ravikumarsurya/mdx-ui add callout tabs code-block accordion

Or run with no arguments for an interactive picker:

npx @ravikumarsurya/mdx-ui

3. Use in MDX

Components are written to your componentsDir and wired into mdx-components.tsx automatically:

<Callout variant="info">
  This is wired up automatically after running add.
</Callout>
 
<Tabs defaultValue="npm">
  <TabsList>
    <TabsTrigger value="npm">npm</TabsTrigger>
    <TabsTrigger value="pnpm">pnpm</TabsTrigger>
  </TabsList>
  <TabsContent value="npm">npm install my-package</TabsContent>
  <TabsContent value="pnpm">pnpm add my-package</TabsContent>
</Tabs>

CLI Commands

CommandDescription
initSet up mdx-ui in your project
add [components...]Add components to your project
update [components...]Update installed components to latest
listShow all available components
list --installedShow only installed components

Components

Typography

Heading · Headings · Paragraph · Emphasis · List · Blockquote · Horizontal Rule · Image

Interactive

Accordion · Tabs · Steps · Tree · File Tree

Code & Math

Code Block · Code Group · Inline Code · Math · Math Primitives · Math Equation · Math Solution · Mermaid

Callouts & Data

Callout · Badge · Table

Philosophy

Copy & paste, not install. Components live in your project. Run npx @ravikumarsurya/mdx-ui add callout and callout.tsx appears in your componentsDir. Change whatever you want.

CSS variables, not hardcoded colors. Every component uses bg-muted, border-border, text-foreground, etc. They follow your Tailwind theme and work in light and dark mode without extra config.

Zero runtime dependencies. The CLI is a dev tool. The components themselves have no shared runtime — each is a standalone .tsx file.

Framework Support

Works with any framework that supports MDX and React:

  • Next.js (App Router and Pages Router)
  • Vite React

init auto-detects your framework and configures CSS accordingly.