Installation

Requirements#

• Node.js 18 or later
• A React project using Next.js or Vite React
• Tailwind CSS configured

Quick Start#

1. Initialize#

Run the CLI in your project root:

npx @ravikumarsurya/mdx-ui init

This creates mdx-ui.json with your project configuration and installs the cn() utility.

2. Add Components#

Add the components you need:

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

Or run without arguments to pick interactively:

npx @ravikumarsurya/mdx-ui add

3. Register Components#

Add the installed components to your mdx-components.tsx:

import { Callout } from "@/components/mdx/callout";
import {
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
} from "@/components/mdx/accordion";
 
export const components = {
  Callout,
  Accordion,
  AccordionItem,
  AccordionTrigger,
  AccordionContent,
};

Framework Guides#

• Next.js + @next/mdx
• Next.js + Contentlayer
• Next.js + MDX Remote

CLI Reference#