# Components overview

Every Readsmith page can use the built-in component library in MDX, no imports required. This page is the map; each gallery page documents one component in depth and renders it live.

## Callouts

Five severities share one anatomy, plus `Check` for confirmations. This paragraph sits in an `Info`. See [Callouts](/docs/components/callouts).

## Structure

| Component                         | Use for                                                      | Gallery                                   |
| --------------------------------- | ------------------------------------------------------------ | ----------------------------------------- |
| `<Accordion>`, `<AccordionGroup>` | Optional detail the reader expands on demand                 | [Accordions](/docs/components/accordions) |
| `<Expandable>`                    | Lightweight nested disclosure inside prose or a field list   | [Expandable](/docs/components/expandable) |
| `<Banner>`                        | A prominent top-of-page announcement, optionally dismissible | [Banner](/docs/components/banner)         |
| `<Tabs>`, `<Tab>`                 | One choice among alternatives, with page-wide sync           | [Tabs](/docs/components/tabs)             |
| `<Steps>`, `<Step>`               | Numbered procedures                                          | [Steps](/docs/components/steps)           |
| `<Card>`, `<CardGroup>`           | Linked navigation tiles                                      | [Cards](/docs/components/cards)           |
| `<Frame>`                         | Media with a caption and a CLS-free declared ratio           | [Frames](/docs/components/frames)         |

## Code

| Component            | Use for                                          | Gallery                                     |
| -------------------- | ------------------------------------------------ | ------------------------------------------- |
| `<CodeGroup>`        | The same snippet in several languages, tabbed    | [Code groups](/docs/components/code-groups) |
| ` ```mermaid ` fence | Diagrams rendered from text, themed and zoomable | [Diagrams](/docs/components/diagrams)       |

Fenced code blocks need no component: they highlight at build time with dual themes, titles, and line emphasis. See [Code blocks](/docs/authoring/code-blocks); the diagram fence is authoring syntax too, at [Authoring, Diagrams](/docs/authoring/diagrams).

## Inline elements

| Component   | Use for                                                      | Gallery                                    |
| ----------- | ------------------------------------------------------------ | ------------------------------------------ |
| `<Badge>`   | Status labels inline with text, with an optional icon        | [Inline elements](/docs/components/inline) |
| `<Icon>`    | A named icon from the bundled Lucide set, inline or in cards | [Icon](/docs/components/icon)              |
| `<Kbd>`     | Keyboard keys, like Ctrl K                                   | [Inline elements](/docs/components/inline) |
| `<Tooltip>` | A definition on hover and focus                              | [Inline elements](/docs/components/inline) |

## Content types

| Component     | Use for                                  | Gallery                                                          |
| ------------- | ---------------------------------------- | ---------------------------------------------------------------- |
| `<Update>`    | Dated changelog entries                  | [Updates](/docs/components/updates)                              |
| `<Operation>` | One generated API operation inside prose | [Operation embeds](/docs/components/operation)                   |
| `<Snippet>`   | Shared content included at build time    | [Snippets and variables](/docs/authoring/snippets-and-variables) |