49 beautifully designed MDX components for your documentation.
Collapsible sections for showing and hiding content
Semantic alert boxes with role="alert" for info, warning, destructive, and success states
Inline text annotation with a click-to-reveal explanation popover
Inline status labels and category tags with muted tinted variants
Styled quote blocks with optional citation
Alert boxes for important information with variants
Card layout components for grouping content, plus LinkCard for navigation grids
Compliance certification display for ISO, TISAX, SOC 2, and similar standards
Versioned changelog with a timeline, date stamps, and typed change badges
Syntax-highlighted code blocks powered by rehype-pretty-code and Shiki
Tabbed code block group for showing the same content across package managers, languages, or frameworks
Structured time and space complexity table for algorithm documentation
Dynamic table with sorting, search, and pagination — write plain arrays in MDX or pass fetched data programmatically
AI/ML numeric data type and tensor specification table
Structured term-definition block for glossaries and key concept callouts
Code diff viewer — highlights + additions in green and - removals in red
Bold and italic text styling
Simple string-based file/folder tree structure with minimal syntax
Page-scoped glossary with hoverable term tooltips powered by React context
Structured hardware interface specification card for ICD-style documentation
Flexible and reusable heading component with variant support
Display all heading levels with proper Markdown syntax
Marker-style inline text highlight — simulates a real highlighter pen with yellow, blue, green, pink, or purple colours
Styled dividers for content sections
Styled image with optional caption, plus ImageGlossary for responsive 1–3 column grids. Swappable renderer for next/image and other framework optimizers.
Styled inline code snippets
Algorithm invariant callout with optional complexity badge
Renders a <script type="application/ld+json"> tag for structured data — improves SEO with Article, BreadcrumbList, FAQPage schemas
Keyboard shortcut display — styled <kbd> element for showing key combinations
Styled anchor with automatic external link detection — adds open-in-new-tab icon and rel="noopener noreferrer" for external URLs
Styled ordered and unordered lists
Numbered display equations and systems of equations — compose with math-primitives
370+ JSX components for every standard math symbol — the single math system for mdx-ui. No LaTeX engine required.
Step-by-step solution blocks with reasons, highlights, and a final answer — for worked examples and proofs
Mermaid diagram renderer — auto-detects flowcharts, sequence diagrams, ER diagrams, Gantt charts, and more
Flexible paragraph component with multiple variants and alignment options
Bordered preview frame for showcasing component output alongside code
GDPR-style personal data collection documentation table for privacy and compliance pages
Hardware register and OTP fuse map table for SDK and BSP documentation
Single collapsible section — click to show or hide content
Security-specific callout with info, warning, and critical severity levels
Collapsible disclosure using native <details>/<summary> — lightweight alternative to Accordion for single items
Numbered step-by-step guides with visual indicators
Search and explore every math primitive component — live rendered with usage snippets.
Styled responsive table with header, body, footer and caption
Interactive tabbed content panels
macOS-style terminal window with traffic lights, input lines ($ prompt), and output lines
Interactive file/folder tree structure for displaying project organization
Video embed with auto-detection for YouTube, Vimeo, and HTML5 video sources
All components are available via the CLI. Install any component directly into your project:
npx mdx-ui add blockquote callout steps