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 on any page.
Usage
Add components to your MDX:
<Card title="Quickstart" icon="rocket" href="/quickstart">
Launch your docs in minutes.
</Card>Layout & Navigation
Collapsible content sections that readers expand for detail. Use them for FAQs, feature lists, and configuration options.
Clickable, styled containers with icons, images, links, and CTAs, arranged in grid layouts.
Responsive grid layout that places Cards, Tiles, and other content side by side. It adapts to screen size.
Frame wraps images and demos in a bordered container with an optional caption.
Pin custom content like warnings or quick references in the sidebar, where it stays visible while readers scroll.
Numbered step-by-step guides for setup flows, tutorials, and troubleshooting, with icons, code blocks, and nested content.
Switchable panels for mutually exclusive content like package managers or languages. Matching tab titles sync across the 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. Use it to document project structure.
Show content for the reader's chosen framework or language. Whole sections switch with the selection.
Content & Emphasis
Inline labels for status, categories, and metadata, with 11 color variants, 4 sizes, icons, pill/rounded shapes, and stroke outlines.
Note, Tip, Warning, Danger, Check, and custom Callout components that highlight key information.
Expandable creates a show/hide toggle for optional content outside 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. Entries appear in the Table of Contents.
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, with optional language tabs, in a sticky right sidebar that stays in view while readers scroll on desktop.
Document API parameters and response fields with ParamField and ResponseField components, with 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. Use Markdown tables or Table components with sorting, highlighting, and spanning.
Diagrams & Visuals
The Color component shows color palettes for 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 that follows the site theme.
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.