mdx
withMdxcn
wrap your mdx components once. tags you swap still parse, and plain markdown — alerts, bylines, shell sessions, footnotes — gets a frame. github still renders the original.
install
all.json already includes it. alone it brings callout, quote, and terminal with it.
command
wire
import { withMdxcn } from "@/registry/default/mdx/mdx"import { GraphTimeline } from "@/registry/default/graph-timeline/graph-timeline"export function useMDXComponents(components) {return withMdxcn({ ...components, GraphTimeline })}
- Runs on the server. The file has no "use client"; the frames it swaps in are client components.
- Register the parents you use. Lists and tables inside them need no imports.
mdx-components.tsx
upgrades
write markdown that already reads right on github. on your site it becomes the frame below. the full list is on grammar.
page.mdx
The CLI copies files. Edit the source.
Less, but better.
pnpm dlx shadcn@latest add @mdxcn/mdx✓ 7 files written
Footnotes
SVG does not survive a README.
overrides
Docs frameworks swap tags for their own components — li: ListItem, table: Table, h3: Heading. A graph reads its children by tag, so a swapped li looks like an unknown component and the list renders empty. withMdxcn marks each swap so the graphs still see the tag. It works under React Server Components too: the mark rides on a data-graph-host prop.
mdx-components.tsx
options
each upgrade is on by default. turn off the ones you style yourself.
options