Components Overview

Everything Dory renders from MDX, in one place. Each specimen shows the rendered output, the source behind it, and the props it accepts.

Components: 24 built in
Theme: From dory.json
Updated: 21 Oct 2026

Dory ships with 24 built-in MDX components you can use directly in .mdx files without any imports. Components range from basic typography helpers to full interactive API testing tools.

Content Components#

Typography

Headings, paragraphs, inline code, and anchor links.

Code Blocks

Syntax-highlighted code with multi-language tabs and copy button.

Callouts

Note, Warning, Info, Tip, and Check callout boxes.

Cards

Linked and informational cards in responsive grid layouts.

Structure Components#

Accordion

Collapsible content sections with optional icons.

Expandable

Expandable sections for nested properties and response fields.

Steps

Numbered step-by-step guides with visual connectors.

Tables

Responsive tables with styled headers and cells.

Media & Visual Components#

Mermaid Diagrams

Flowcharts, sequence diagrams, ER diagrams, and more.

LaTeX Math

Render mathematical expressions using KaTeX.

Images

Clickable images with fullscreen modal overlay.

Icons

Inline icons from the shared Clidey UX catalog.

Utility Components#

Lists

Styled unordered and ordered lists.

Interactive Playgrounds#

API Playground

Interactive HTTP request testing with headers, auth, and response display.

WebSocket Playground

Live WebSocket connection tester with message history.

Using Components#

All components are available in .mdx files without any imports:

MDX

---
title: 'My Page'
---

# My Page

<Note>
  This is a note callout — no import needed.
</Note>

<CardGroup cols={2}>
  <Card title="Getting Started" icon="rocket" description="Set up your project." />
  <Card title="Configuration" icon="settings" description="Customize your site." />
</CardGroup>

Note

All components are built into Dory. You never need to install or import anything — just use them directly in your pages.

Was this page helpful?