Components are React elements that render styled, accessible blocks beyond what plain Markdown gives you. Dokly ships ten of them, all available in the slash menu and all dark-mode aware out of the box.
The full list#
Callout
Tip, warning, note, danger, success — for highlighting important context.
Tabs
Multi-tab content. Common for showing the same thing in different languages.
Steps
Numbered procedure with titled steps.
Cards & Card group
Linked cards with icons, often used as a homepage hub.
Code block
Syntax-highlighted code with language tag and copy button.
API Playground
Interactive endpoint runner. The single-endpoint version of an OpenAPI page.
FAQ
Collapsible question + answer.
Badge
Small inline label — Pro, Beta, Deprecated.
Image
Optimized images with captions and lightbox.
Why a fixed component set#
Dokly doesn't let you import arbitrary React components. This is intentional.
Pros:
- Your docs render identically in the editor preview and on the live site.
- No build can break because of a typo in a custom component.
- Components are themed consistently — your docs look coherent without effort.
- Migration to or from Dokly is trivial — the components are MDX standards.
Cons:
- If you need a one-off custom widget, you can't ship it.
For most teams the trade-off is right. If you genuinely need custom components, Enterprise can whitelist additions to the component set — talk to us.
Inserting a component#
Three ways:
- Slash menu —
/callout,/tabs, etc. Easiest. - Markdown shortcut — for the few that have one (e.g.,
```for code blocks). - Type the JSX directly — switch to source view and write
<Callout type="tip">...</Callout>.
The slash menu is the right default. The other two are for power users.
Component props#
Each component has a small set of props (icon, type, title, etc.). The slash menu's insert form prompts you for them. The source view shows the JSX.
Each component's deep-dive page documents every prop with examples — see the cards above.