Components
Writedocs injects a standard set of components into every .md/.mdx file automatically — no import statements needed anywhere in your content.
Every component also accepts className (or class) with your own classes, added to the component’s outermost element - for example <Card className="featured">. Style those classes in a custom stylesheet, or use Tailwind utility classes directly.
Callout
Note, info, tip, warning, and danger boxes — plus a same-named shorthand for each.
Card and CardGroup
Linkable cards with an icon, image, or HTTP-method badge, laid out in a grid.
Tabs and Tab
A tabbed switcher for any block content.
CodeGroup
Multiple fenced code blocks as a tab strip or dropdown switcher.
RequestExample and ResponseExample
Code examples pinned in the right sidebar instead of inline.
Accordion and AccordionGroup
Collapsible rows, united under one shared border.
Steps and Step
A numbered, connected sequence of instructions.
Hint
An inline, dotted-underline tooltip for a short aside.
Image
A centered, size-constrained image with optional dark-mode variant and caption card.
Frame
A bordered, rounded card around any existing markup.
Video
A native <video> or embed <iframe>, auto-detected from src.
Parameter and Expandable
The name/type/description row used throughout API reference content.
Searchbar
A live text filter wrapped around a table or other content.
Badge
A small inline label for status indicators, version tags, or metadata.
Icon
An inline icon or custom image, plus how every icon string across writedocs.json resolves.
Update
Changelog entries with a label, description, and tag filters.
Tree
A file and folder tree with collapsible folders.
Tile
A preview image on a patterned background, with a title and description.
Panel
Content pinned to the right-hand column, in place of the table of contents.
Prompt
A ready-made AI prompt readers can copy or open in Cursor.
View
Alternative versions of the same content, with one switcher for the page.
Color
Color swatches with click-to-copy values.
GitHub repository
A card linking to a public GitHub repository.
Visibility
Content for people on the site, or for AI agents reading its Markdown.
Plain Markdown still works
Every component above is additive — regular Markdown syntax (lists, tables, blockquotes, links, bold/italic, inline code) works exactly as you’d expect with no component wrapper needed. See Code blocks for what fenced (```) blocks specifically support beyond plain syntax highlighting.