Components

Callouts, cards, steps, tabs, accordions and more, with the source for each.

On this page

Callouts
Cards
Steps
Tabs
Accordions
Smaller pieces

Pages can use these components without importing anything. The names and props match Mintlify's, so pages written for Mintlify render here unchanged.

Callouts

<Note>**Note.** Extra context that is good to know.</Note>
<Warning>**Warning.** Something that can go wrong if it is ignored.</Warning>

The surface stays neutral and only the icon and hairline take the tone, because colour never sits behind body copy in the Hexel Studio theme. Pass icon="..." with any Lucide name to change the icon.

Cards

Cards with an href are links. Internal links stay in the app.

Titan

mark shows a product orb instead of an icon.

<CardGroup cols={2}>
  <Card title="Register an application" icon="key" href="/docs/authoring/pages">
    Cards with an `href` are links. Internal links stay in the app.
  </Card>
  <Card title="Titan" mark="titan" href="https://hexelstudio.com/titan">
    `mark` shows a product orb instead of an icon.
  </Card>
</CardGroup>

cols takes 1 to 4. Icons accept Lucide names and the common Font Awesome names Mintlify uses, such as circle-info or gear. mark takes titan, gateway, atlas, observe, orbit or platform.

Steps

Create the client
Register the application in Console.
Add redirect URLs
List every URL the identity service may send users back to.
Test sign-in
Sign in once and confirm the token has the expected audience.

<Steps>
  <Step title="Create the client">Register the application in Console.</Step>
  <Step title="Add redirect URLs">List every URL the identity service may send users back to.</Step>
  <Step title="Test sign-in">Sign in once and confirm the token has the expected audience.</Step>
</Steps>

Tabs

Use the Authorization Code flow with PKCE and keep tokens out of local storage.

<Tabs>
  <Tab title="Web">Use the Authorization Code flow with PKCE…</Tab>
  <Tab title="Mobile">Sign in through the system browser…</Tab>
</Tabs>

Inactive tabs stay in the page, so find-in-page and search engines still see them. For code in several languages, use CodeGroup instead.

Accordions

Why is my page missing from the sidebar?

Its slug is not in docs.config.ts. The build lists every unlisted file.

Can I nest components?Callouts, code and lists all work inside

Yes. Anything that works on a page works inside an accordion.

pnpm build

<AccordionGroup>
  <Accordion title="Why is my page missing from the sidebar?" defaultOpen>
    Its slug is not in `docs.config.ts`.
  </Accordion>
  <Accordion title="Can I nest components?" description="Callouts, code and lists all work inside">
    Yes.
  </Accordion>
</AccordionGroup>

Accordions are native <details> elements: they open and close before any script loads.

Smaller pieces

Component	Example	Use
`Badge`	Beta	A short status label
`Icon`		An inline Lucide icon
`Frame`		A padded frame with an optional `caption`, for screenshots
`Update`		A changelog entry with a `label` (date or version) and `description`

<Badge>Beta</Badge>
<Icon icon="shield" size={16} />

<Update label="2026-10-09" description="v0.1.0">
  First release of the docs site.
</Update>

2026-10-09

v0.1.0

First release of the docs site: navigation from docs.config.ts, search, Markdown copies of every page and the Hexel Studio theme.