---
title: Components
description: Callouts, cards, steps, tabs, accordions and more, with the source for each.
url: https://hexelstudio.com/docs/authoring/components
---

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>

<Info>**Info.** A neutral fact the reader should keep in mind.</Info>

<Tip>**Tip.** A shortcut or a better way to do something.</Tip>

<Check>**Check.** A requirement that is met, or a result to confirm.</Check>

<Warning>**Warning.** Something that can go wrong if it is ignored.</Warning>

<Danger>**Danger.** An action that is destructive or cannot be undone.</Danger>

```mdx
<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](https://lucide.dev/icons) name to change the icon.

## Cards

<CardGroup cols={2}>
  <Card title="Register an application" icon="key" href="https://hexelstudio.com/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>

```mdx
<CardGroup cols={2}>
  <Card title="Register an application" icon="key" href="https://hexelstudio.com/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

<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>

```mdx
<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

<Tabs>
  <Tab title="Web">
    Use the Authorization Code flow with PKCE and keep tokens out of local storage.
  </Tab>
  <Tab title="Mobile">
    Sign in through the system browser, never an embedded web view.
  </Tab>
  <Tab title="Backend">
    Validate the access token's signature, issuer, audience and expiry on every request.
  </Tab>
</Tabs>

```mdx
<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](https://hexelstudio.com/docs/authoring/code-blocks#code-groups) instead.

## Accordions

<AccordionGroup>
  <Accordion title="Why is my page missing from the sidebar?" defaultOpen>
    Its slug is not in `docs.config.ts`. The build lists every unlisted file.
  </Accordion>
  <Accordion title="Can I nest components?" description="Callouts, code and lists all work inside">
    Yes. Anything that works on a page works inside an accordion.

    ```bash
    pnpm build
    ```
  </Accordion>
</AccordionGroup>

```mdx
<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` | <Badge>Beta</Badge> | A short status label |
| `Icon` | <Icon icon="shield" /> | 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` |

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

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

<Update label="2026-10-09" description="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.
</Update>