Components Overview
Explore Jamdesk's MDX components, including cards, tabs, callouts, and code blocks, to find the right fit for your documentation content.
Jamdesk includes MDX components you can use in any page. This overview helps you choose the right component for your content.
Usage
Drop components directly into your MDX:
<Card title="Quickstart" icon="rocket" href="/quickstart">
Launch your docs in minutes.
</Card>Layout & Navigation
Collapsible content sections that let users expand only what they need. Ideal for FAQs, feature lists, and configuration options.
Learn to use the Card component to build clickable, styled containers with icons, images, links, and CTAs in grid layouts.
Responsive grid layout for displaying Cards, Tiles, and other content side by side. Automatically adapts to screen size.
Frame wraps images and demos in a bordered container with optional captions, keeping documentation visuals consistent.
Use Panel to pin custom content like warnings or quick references in the sidebar, keeping it visible while readers scroll.
Numbered step-by-step guides for setup flows, tutorials, and troubleshooting. Supports icons, code blocks, and nested content.
Switchable panels for mutually exclusive content like package managers or languages. Matching tab titles sync across the entire page.
Tiles display content previews with a styled pattern background and prominent image area. Use them for integrations, templates, or visual galleries.
Display file and folder hierarchies with interactive expand/collapse and keyboard navigation. Ideal for project structure documentation.
Create documentation that adapts to the reader's framework or language choice. Entire sections switch based on user selection.
Content & Emphasis
Inline labels for status, categories, and metadata -- 11 color variants, 4 sizes, icons, pill/rounded shapes, and stroke outlines.
Learn how to use Note, Tip, Warning, Danger, Check, and custom Callout components to highlight key information in your docs.
Expandable creates a simple show/hide toggle for content that readers may want to see but isn't essential to the main flow.
Display definitions and context on hover. Define terms, explain acronyms, or link to related content without cluttering the page.
Timeline-style changelog entries with dates, descriptions, and category tags. Integrates with your Table of Contents for navigation.
Show different content to human readers and AI agents on the same page. Agent-only context, instructions, and definitions that stay out of the rendered docs.
Code & Data
Display code blocks in a tabbed interface. Show the same operation in multiple languages like cURL, Python, and JavaScript.
Pin code blocks in a sticky right sidebar on desktop so readers can reference them while scrolling. Supports tabbed languages.
Document API parameters and response fields with ParamField and ResponseField components. Supports types, defaults, and nested objects.
Use Prompt to present reusable AI instructions with copy, built-in open-in actions, custom destinations, icons, and compact display options.
Organize data into rows and columns. Supports markdown tables and Table components with sorting, highlighting, and spanning.
Diagrams & Visuals
The Color component displays color palettes for documenting design systems, brand guidelines, or any color specification.
Render flowcharts, sequence diagrams, timelines, pie charts, and more from text-based Mermaid syntax. Diagrams are built as SVG at build time.
Render architecture diagrams, flowcharts, sequences, and SQL models from text-based D2 syntax. Diagrams render as SVG with automatic light and dark theming.
Engagement
Add a newsletter or changelog signup form to any docs page with the EmailSubscribe component: native capture for seven providers, embeds for the rest.
Embed a live What's New widget demo in your docs with the Widget MDX component: a trigger button that opens your changelog in a modal, no script tag needed.