Components
Explore the full library of Documentation.AI components for building rich, interactive documentation pages.
Documentation.AI provides a library of components that extend standard Markdown with interactive, structured, and visual elements. You can insert any component through the web editor's slash-command menu or write it directly in MDX.
Every component page below covers both the visual editor workflow and the MDX syntax, so you can use whichever authoring approach you prefer.
Content Fundamentals
The basic building blocks of every documentation page: text, structured data, and code.
Headings and Text
Structure pages with headings, paragraphs, inline formatting, and links.
Lists and Tables
Organize information with ordered lists, unordered lists, and data tables.
Code and Groups
Display syntax-highlighted code blocks and tabbed multi-language examples.
Layout and Navigation
Control how content is arranged on the page and help readers navigate between sections.
Card
Create navigation hubs and feature highlights with icons, images, and CTAs.
Columns
Arrange content in responsive multi-column grid layouts.
Collection List
Auto-generate card, accordion, list, or link layouts from your navigation tree.
Collection Content
Display a full nested navigation tree as a collapsible accordion.
Media and Visuals
Enrich your documentation with images, video, and diagrams.
Images
Add optimized, CDN-delivered images with responsive sizing and alt text.
Videos and Iframes
Embed YouTube, Vimeo, Loom videos, or any external content via iframe.
Mermaid Diagrams
Create interactive flowcharts, sequence diagrams, and other visuals from code.
Interactive and Structural
Guide readers through content with progressive disclosure, step-by-step flows, and highlighted information.
Callout
Highlight tips, warnings, alerts, and other important notes without breaking reading flow.
Expandables
Hide detailed content behind collapsible sections for progressive disclosure.
Steps
Display sequential instructions with numbered steps, icons, and connecting lines.
Tabs
Organize alternative content into a tabbed interface with smooth transitions.
Update
Create timeline-style changelog entries with labels, dates, and tags.
API Documentation
Purpose-built components for documenting API endpoints, parameters, and responses.
Param Field
Document API parameters with location badges, types, and required or deprecated indicators.
Response Field
Document API response fields with types, nesting, and status badges.
API Components
Display request and response examples in a two-column layout with sticky sidebar.
Choosing the right component
- Page structure and text formatting — Headings and Text, Lists and Tables
- Code examples in one or more languages — Code and Groups
- Step-by-step procedures — Steps
- Platform-specific or alternative content — Tabs
- Supplementary information or warnings — Callout
- Hiding details until needed — Expandables
- Navigation grids and feature showcases — Card inside Columns
- Auto-generated section landing pages — Collection List or Collection Content
- API parameter and response documentation — Param Field, Response Field, and API Components
- Screenshots and visual aids — Images
- Video walkthroughs — Videos and Iframes
- Architecture and flow diagrams — Mermaid Diagrams
- Release notes and changelogs — Update
Last updated 4 weeks ago
Built with Documentation.AI