CmdocsComponents
All built-in UI components — auto-imported, ready to use in any MDX page.
Components
cmdocs ships a rich set of UI components that are auto-imported into every MDX file. No import statements — just use the component directly and the pipeline injects the right import at build time.
<Callout type="info">
No import needed — this just works.
</Callout>When to reach for which component
| Need | Component | Use case |
|---|---|---|
| Highlight a fact, warning, or tip | Callout | Inline info/warn/error banners |
| Link to related pages | Cards | Responsive grid of linked summaries |
| Alternate between parallel content | Tabs | Package managers, OS variants, language variants |
| Walk users through an ordered procedure | Steps | Install/setup/deploy flows |
| Collapse optional or FAQ content | Accordion | FAQs, "advanced" details, troubleshooting |
| Show a file or folder layout | Files | Project structure, scaffolding examples |
| Document props / config / API fields | TypeTable | Reference tables with types and defaults |
| Show syntax-highlighted code | Code blocks | Every language, with optional titles |
| Diagram a flow or state machine | Mermaid | Architecture, sequence, state diagrams |
| Embed an image | Images | Screenshots, diagrams, logos (zoomable) |
Full catalog
Callout
Highlight important information with colored banners.
Cards
Display content in responsive card grids.
Tabs
Organize content into switchable panels.
Steps
Create numbered step-by-step instructions.
Accordion
Collapsible sections for FAQs and details.
Files
Display file and folder tree structures.
TypeTable
Document props, configs, and API parameters.
Code Blocks
Syntax-highlighted code with titles and tabs.
Mermaid
Render flowcharts, sequence diagrams, and more.
Images
Zoomable images with click-to-expand.
How auto-imports work
At build time, the cmdocs pipeline scans each MDX file, detects which components it uses, and injects the matching imports before Next.js compiles the file. That means:
- You never write
import { Callout } from "fumadocs-ui/components/callout"— it just works. - Component names are fixed and case-sensitive (
<Callout>, not<callout>). - Only the components you actually use end up in the compiled page.
- Unknown component names (e.g.
<MyCustomThing>) fail at build time — there is no custom component loader today.
Icons
Several components (<Card>, <Accordion>, navbar links, tabs, frontmatter) accept an icon prop. Values can be either:
- A Lucide icon name — e.g.
"BookOpen","Rocket","Github". - An emoji — e.g.
"📘","🚀","⚙️".
Icons are resolved at build time. A typo falls back to a generic placeholder and logs a warning.
Tips for picking
- Don't over-decorate. One Callout per page, one Steps block, at most one Accordion set. Dense markup is hard to scan.
- Tabs vs Steps. Tabs are parallel (pick one), Steps are sequential (do all, in order).
- Accordion vs Callout. Accordion for optional detail the reader can skip; Callout for a must-read note.
- Cards at the bottom. Use a Cards row at the end of a page as the "where next?" CTA, not mid-page.
What's next
How is this guide?