mdxcn

Overview

mdxcn is a free, MIT-licensed set of Markdown-friendly React components from Shadcn Labs, made for MDX documentation, READMEs and pull requests. Components accept regular Markdown inside their tags, so lists, tables and emphasis can be written inside a callout or a step without switching syntax.

Its distinctive feature is text-powered figures: charts and diagrams are drawn with glyphs rather than SVG or canvas. The registry has 51 items, including callouts, quotes, steps, terminals, changelogs, FAQs, API endpoints and keyboard shortcuts, plus more than 30 graph types such as bars, flows, trees, timelines, Gantt charts, funnels, heatmaps, waterfalls and KPIs. Corners, glyphs, palettes and accents are all customizable, and the components work with MDX, Comark blocks or Knap filters.

Features

• Markdown inside components: Write lists, tables and emphasis inside component tags
• Text-drawn graphs: 30+ charts and diagrams drawn with glyphs
• Docs components: Callouts, quotes, steps, terminals, changelogs, FAQs and endpoints
• Fenced ASCII: Official fenced ASCII output for READMEs and PRs
• Customizable: Control corners, glyphs, palettes and accents
• Type-safe: React components with TypeScript props
• shadcn registry: Install with the shadcn CLI

Tech stack

• React, TypeScript
• MDX

Registry

Install via the shadcn CLI registry:

npx shadcn@latest add https://mdxcn.dev/r/callout.json