Documentation

Components

These components are available in any guide or endpoint description. Every example on this page is rendered by the same engine that serves your published docs.

Callouts

Set the variant with type. <Note>, <Tip>, <Warning> and <Info> are shorthands for the matching type.

Info

Context a reader benefits from but can skip.

Tip

A shortcut or a better way to do the thing they are already doing.

Warning

Something that will cost them time or data if they get it wrong.

Danger

Destructive and hard to undo.

<Callout type="warning" title="Saving is not publishing">

Readers keep seeing the last published version until you publish.

</Callout>

Cards

Give a card an href and it becomes clickable. icon accepts any name from the built-in icon set.

One

Cards without an href are static.

Two

Set cols on the group to control the grid.

Three

They reflow to a single column on mobile.

<CardGroup cols={3}>

<Card title="One" icon="rocket" href="/somewhere">

Cards without an href are static.

</Card>

</CardGroup>

Tabs

For the same instruction in different environments. Reach for them when a reader only needs one branch.

brew install octri

Only the open tab is rendered

Tabs render the active panel only. Don't put anything a reader must not miss behind a tab that isn't the first one.

CodeGroup

Like Tabs, but purpose-built for code. Each fenced block becomes a tab labelled from its title meta or its language.

npm install @acme/api

Steps

Auto-numbered and connected. For ordered setup, not unordered lists.

First

Steps take any content, including code blocks and callouts.
Second

They renumber automatically when you reorder them.

Accordions

Keep long reference material and troubleshooting out of the reader's way until they need it. defaultOpen="true" starts one expanded.

Parameter and response fields

For documenting a field by hand, where the generated reference doesn't reach.

limitintegerquerydefault: 20

Maximum number of items to return. Caps at 100.

cursorstringquery

Opaque pagination cursor from a previous response.

dataUser[]

The page of results.

next_cursorstring | null

Pass as cursor to fetch the next page. Null on the last page.

<ParamField name="limit" type="integer" in="query" required default="20">

Maximum number of items to return.

</ParamField>

Badges, icons, and tooltips

Badges work inline and inside table cells. Tables use standard GitHub-flavoured markdown.

Surface	Status
Endpoint reference	Stable
Guides	Stable
AI chat	Beta

Icons render inline:

A tooltip explains a term without spending a sentence on it.

Media

<Frame> wraps an image with a border, an optional caption, and click-to-zoom. <Video> embeds YouTube, Vimeo, or a direct file.

<Frame src="/screenshots/studio.png" alt="SDK Studio" caption="The Output tab" />

<Video url="https://www.youtube.com/watch?v=..." />

Full component list

Need something else? See Custom components.