Nextra ships a set of ready-made React components that you can drop directly into any MDX page. All components are exported from theDocumentation Index
Fetch the complete documentation index at: https://mintlify.com/shuding/nextra/llms.txt
Use this file to discover all available pages before exploring further.
nextra/components package, so there is no separate install step — simply import the component you need at the top of your .mdx file and start using it. The components range from presentational elements like callout boxes and tabbed layouts to structural helpers like step-by-step instructions and visual directory trees.
Available Components
Callout
Highlighted note, warning, tip, info, or important boxes to draw the reader’s attention to critical content.
Cards
A responsive grid of linked cards, optionally decorated with icons, images, and arrow indicators.
Tabs
A tabbed content switcher for presenting alternative information — such as per-package-manager install commands — side by side.
Steps
Converts Markdown headings inside the wrapper into an auto-numbered, visually connected step sequence.
FileTree
Renders an interactive, collapsible visual representation of a file and directory structure.
Banner
A dismissible top-of-page announcement strip, ideal for version releases or important notices.
Additional Components
Beyond the six core components above, Nextra also exports the following helpers directly fromnextra/components:
Layout & Presentation
Layout & Presentation
| Component | Description |
|---|---|
Bleed | Allows content to break out of the standard prose column on both sides. Accepts a full boolean prop to extend all the way to the viewport edges. |
Collapse | A low-level animated collapse/expand wrapper. Accepts an isOpen boolean prop and optional horizontal, openDuration, and closeDuration controls. |
Head | Configures <head> tags, the primary theme color (hue, saturation, lightness), background color, and favicon glyph for the site. |
ImageZoom | Wraps an <img> element and enables a click-to-zoom lightbox interaction. |
Navigation & Interaction
Navigation & Interaction
Diagrams & Math
Diagrams & Math
| Component | Description |
|---|---|
Mermaid | Renders a Mermaid diagram from a fenced code block marked with the mermaid language identifier. Provided by @theguild/remark-mermaid. |
MathJax | Inline or block math rendered by better-react-mathjax. |
MathJaxContext | Context provider required by MathJax. Place it above any page that uses math rendering. |
Importing Components
All components share a single import path:Components that require browser APIs (such as
Tabs, Banner, and Collapse) are automatically rendered as client components via 'use client' directives inside the package. You do not need to add that directive to your own MDX files.