WritedocsWritedocs

Components

View as MarkdownView this page as plain textOpen in ChatGPTAsk questions about this pageOpen in ClaudeAsk questions about this pageOpen in PerplexityAsk questions about this page
Connect to CursorUse these docs in CursorConnect to VS CodeUse these docs in VS Code

Components are tags you write in an .mdx page, like <Callout> or <Card>. All of them are available in every page and snippet, with no import.

<Callout type="tip" title="Before you start">
  You'll need an API key - create one in the dashboard.
</Callout>
Before you start#

You’ll need an API key - create one in the dashboard.

Callouts and text

Callout

A highlighted box for a note, tip, warning or danger.

Hint

A word with a tooltip, in the middle of a sentence.

Badge

A small label for a status, a version or a plan.

Icon

An icon in the text - and the icons you can use everywhere.

Layout

Card and CardGroup

Cards that link to pages, and a grid to lay them - or anything - out in columns.

Tile

A preview image on a patterned background, with a title.

Panel

Content pinned to the right-hand column.

Organizing content

Tabs

The same place in a page, with a tab per option.

Accordion

Sections that open and close.

Steps

A numbered procedure.

View

A whole page in versions - per language or framework - with one switcher.

Visibility

Content only for people, or only for AI tools.

Code

CodeGroup

Several code blocks, one at a time, with tabs or a menu.

CodeBlock

A code block built from props.

RequestExample and ResponseExample

A request and its response, pinned beside the page.

Media

Image

An image with a size, a caption and a dark-mode version.

Frame

A border and a caption around anything.

Video

A video file, or a YouTube, Vimeo or Loom video.

Reference

Parameter

A field’s name, type and description - for APIs and configuration.

Searchbar

A box that filters a table as the reader types.

Tree

Files and folders.

Update

Changelog entries, with filters.

Color

Color swatches that copy their value.

Prompt

An AI prompt to copy, or open in Cursor.

GitHub repository

A card for a GitHub repository, with its stars.

Writing components

  • Props are written like HTML attributes: text in quotes (title="Setup"), anything else in braces (cols={3}, defaultOpen={true}, tags={["Fix"]}). A prop with no value is true: <Accordion defaultOpen>.
  • Content goes between the opening and closing tags, and can be Markdown - lists, code blocks, other components. Leave a blank line after the opening tag when the content starts with a list or a code block.
  • Mistakes - a tag that isn’t closed, or a component that doesn’t exist - are reported by writedocs validate and writedocs dev, with the file and line. An unknown component shows just its content.

Your own classes

Every component accepts className, added to its outer element:

<Card title="Enterprise" className="featured-card" href="/enterprise/">
  SSO, audit logs and a dedicated contact.
</Card>

Style the class in a CSS file, or use utility classes directly: className="mt-8".

Your own components

For something no component covers, write a React component in a snippet, and import it.