Visual Component Gallery
A showcase of all available Fumadocs UI elements.
Component Showcase
Welcome to the visual testing page. If your docs.tsx and app.css are configured correctly, you should see rich interactive elements below.
1. Notification Boxes (Callouts)
Use these to highlight important information, warnings, or tips.
Information: This is a standard info box for general tips.
Warning: Be careful when editing the root configuration files.
Danger: This action cannot be undone. Always back up your data.
2. Interactive Tabs
Perfect for showing different code languages or alternative setup methods.
console.log("Hello from Fumadocs!");println!("Hello from the safety of Rust!");print("Hello from Python!")3. Step-by-Step Guides
Install Dependencies
Run the following command in your terminal:
npm install fumadocs-ui<svg width="32" height="32" viewBox="0 0 490 500" fill="none" xmlns="http://www.w3.org/2000/svg">
<g>
<path d="M243.398 214.363V125.272H225.6 C210.293 179.084 180.746 238.598 145.86 285.637
H247.669V374.728H265.467 C280.774 320.917 310.321 261.402 345.207 214.363 H243.398Z" />
</g>
</svg>Configure Tailwind Add the Fumadocs preset to your tailwind.config.ts.
Start Building Create your first .mdx file in the content folder.
- API Reference Tables The TypeTable is the best way to document props or data structures.
Prop
Type
- Cards and Grids Use Cards to create a visual directory of your documentation sections.
Installation
Learn how to get started with the framework.
GitHub Repository
View the source code on GitHub.
- Accordions For FAQs or collapsible content blocks.
| Feature | Support | Notes |
|---|---|---|
| Markdown | ✅ | Standard GFM syntax. Bolt’s Salesforce Reference Architecture Cartridge integrates Bolt’s fully-hosted Checkout experience within a SFRA. The Bolt Checkout Button is installed on the SFRA Cart Page and MiniCart Component (optional) and replaces the native SFRA Checkout. |
| Custom Styles | ✅ | Via Tailwind CSS |
| Horizontal | ✅ | Scrollable on mobile |