Components are styled, accessible blocks beyond what plain text 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 ships a curated set of components. You can't add your own. This is intentional.
Pros:
- Your docs render identically in the editor preview and on the live site.
- No build can break because of a custom component bug.
- Components are themed consistently — your docs look coherent without effort.
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#
Use the slash menu — type / and start typing the component name. /cal filters to Callouts, /api filters to API Playground, and so on. The full list is in Slash menu.
A few components also have Markdown shortcuts that transform into the block (e.g., ``` for a code block). See Writing in Dokly for the full shortcut list.
Component settings#
Each component has a small set of settings (color, type, title, etc.). After inserting, click the block to open its inline controls or the inspector panel — both expose the same options.
Each component's deep-dive page documents every setting with examples — see the cards above.