# Overview

Components for building Tempo products, grouped by the job each one does.

## Principles

* **Native first.** Components render native elements such as `<button>`, `<input>`, and `<table>`, and accept their attributes, refs, classes, and styles.
* **Accessible behavior.** Components that coordinate focus, keyboard, or popups build on Base UI primitives, so you get keyboard support and ARIA wiring without extra work.
* **Composable parts.** Larger components split into named parts, such as `Dialog.Root` and `Dialog.Title`, so you control the markup between them.
* **Shared tokens.** Every component reads Tempo variables for color, spacing, type, and motion. A variable scope on a wrapper restyles everything inside it.

## Actions

Controls that start an action or copy a value.

- [Button](/docs/components/button): Triggers an action, such as submitting a form or sending a payment.
- [CopyButton](/docs/components/copy-button): Copies a value to the clipboard and confirms the copy.
- [SplitButton](/docs/components/split-button): Pairs a primary action with a menu of alternatives.

## Forms and Inputs

Controls that collect values, plus the parts that label and group them. Wrap each control in a `Field` so its label, description, and error stay linked.

- [AmountInput](/docs/components/amount-input): Accepts a decimal amount, such as a payment or transfer value.
- [Autocomplete](/docs/components/autocomplete): A text input that suggests values as you type.
- [Calendar](/docs/components/calendar): A month grid for picking one date or a date range.
- [Checkbox](/docs/components/checkbox): Lets you turn a single independent option on or off.
- [CheckboxGroup](/docs/components/checkbox-group): Shares one value array across a group of checkboxes.
- [ChoiceGroup](/docs/components/choice-group): A segmented control for a few mutually exclusive options.
- [Choicebox](/docs/components/choicebox): A selectable tile with an optional icon, title, and description.
- [Combobox](/docs/components/combobox): A text input that filters a list of fixed options as you type.
- [DatePicker](/docs/components/date-picker): Shows the selected date and opens a calendar in a popup.
- [Field](/docs/components/field): Links a label, description, and error message to a control.
- [Fieldset](/docs/components/fieldset): Groups related fields under a shared legend.
- [Input](/docs/components/input): A text field with optional prefix, suffix, and clear button.
- [NumberField](/docs/components/number-field): A numeric input with increment and decrement buttons.
- [OtpField](/docs/components/otp-field): Accepts a one-time passcode, one character per slot.
- [RadioGroup](/docs/components/radio-group): Lets you pick a single option from a short list.
- [Select](/docs/components/select): Opens a list of options for choosing one value.
- [Slider](/docs/components/slider): Picks a single value or a range by dragging.
- [Switch](/docs/components/switch): Toggles a setting that applies immediately.
- [Textarea](/docs/components/textarea): A multi-line text field.

## Feedback and Status

Components that report progress, results, and system state.

- [Banner](/docs/components/banner): Shows a full-width message about the system or page.
- [Callout](/docs/components/callout): Shows an inline message tied to nearby content.
- [Empty](/docs/components/empty): Fills a region that has nothing to show yet.
- [Gauge](/docs/components/gauge): Shows a measurement within a range as a ring.
- [LoadingDots](/docs/components/loading-dots): Shows three pulsing dots for inline loading.
- [Progress](/docs/components/progress): Shows how far a task has advanced.
- [Skeleton](/docs/components/skeleton): Holds the place of content while it loads.
- [Spinner](/docs/components/spinner): Shows that something is loading.
- [Toast](/docs/components/toast): Shows a brief notification that dismisses itself.

## Overlays

Popups that open above the page from a trigger.

- [AlertDialog](/docs/components/alert-dialog): Asks you to confirm a critical action before it happens.
- [Dialog](/docs/components/dialog): Opens a modal popup over the page.
- [Drawer](/docs/components/drawer): Slides a modal panel in from an edge of the viewport.
- [Menu](/docs/components/menu): Opens a list of actions from a button.
- [Popover](/docs/components/popover): Opens a non-modal popup anchored to a trigger.
- [Tooltip](/docs/components/tooltip): Shows a short label for a control on hover or focus.

## Navigation

Components that move you between pages, views, and steps.

- [Breadcrumbs](/docs/components/breadcrumbs): Shows where the current page sits in the site hierarchy.
- [Pagination](/docs/components/pagination): Moves between pages of a long list.
- [SidebarMenu](/docs/components/sidebar-menu): Vertical navigation for sidebars and drawers.
- [Stepper](/docs/components/stepper): Shows progress through a fixed sequence of steps.
- [Tabs](/docs/components/tabs): Switches between related views.

## Layout

Primitives that size, space, and arrange content. They carry no meaning of their own, so pair them with semantic elements where structure matters.

- [AppShell](/docs/components/app-shell): Places a sticky sidebar beside the main content column.
- [Container](/docs/components/container): Centers content at a maximum width.
- [Frame](/docs/components/frame): Lays out a header, body, and footer in a column.
- [Grid](/docs/components/grid): Lays out children on a responsive grid.
- [Inline](/docs/components/inline): Lays out children in a horizontal row.
- [Inset](/docs/components/inset): Pads content with spacing tokens.
- [Separator](/docs/components/separator): Draws a rule between groups of content.
- [Stack](/docs/components/stack): Lays out children in a vertical column.
- [Surface](/docs/components/surface): A card container for grouping related content.

## Data Display

Components that present content and records.

- [Accordion](/docs/components/accordion): Stacks collapsible sections that each reveal a labelled panel.
- [Avatar](/docs/components/avatar): Shows a circular image of a person or entity, with a fallback.
- [IconChip](/docs/components/icon-chip): Centers an icon in a rounded square.
- [Kbd](/docs/components/kbd): Shows a keyboard key or shortcut.
- [Rows](/docs/components/rows): Stacks divided rows for settings, details, and navigation.
- [Snippet](/docs/components/snippet): Shows a one-line command or value with a copy button.
- [Table](/docs/components/table): Displays tabular data in rows and columns.
- [Tag](/docs/components/tag): Labels a status or attribute in a compact chip.

## Blockchain

Components for onchain values such as addresses, amounts, and tokens.

- [Amount](/docs/components/amount): Formats a number as money or a token amount in your locale.
- [Hex](/docs/components/hex): Shows a hex string, such as an address, truncated to fit.
- [Identicon](/docs/components/identicon): Shows a unique gradient avatar derived from an address.
- [Qr](/docs/components/qr): Renders a value as a QR code.
- [SecretValue](/docs/components/secret-value): Masks a secret and adds reveal and copy buttons.
- [Token](/docs/components/token): Shows a token icon by contract address or symbol.

## Choosing a Component

Several components cover similar ground. These comparisons point you to the right one.

### Choosing One Option

Use:

* `RadioGroup` for two to five options, where you want to see them all at once.
* `ChoiceGroup` for two to four short options that switch a view or mode.
* `Choicebox` for a few options that each need an icon or description.
* `Select` for many options, or limited space.
* `Combobox` for a long list you want to filter by typing.
* `Autocomplete` for free text with suggested values.

### On and Off

Use `Switch` for a setting that applies the moment you flip it. Use `Checkbox` for a choice that takes effect when you submit a form, or for agreeing to terms.

### Messages

Use:

* `Banner` for a message about the whole product or page, such as an outage.
* `Callout` for a message about a specific section or field.
* `Toast` to confirm that an action finished.
* `AlertDialog` for an action that needs a decision before it continues.

Don't put information you need to act on in a `Toast`, since it dismisses itself.

### Loading

Use:

* `Skeleton` while content with a known shape loads.
* `Progress` for a task with a measurable amount of work.
* `Spinner` while a region or control is busy for an unknown time.
* `LoadingDots` for a short wait inside a line of text.

Set `loading` on a `Button` instead of placing a `Spinner` beside it.

### Popups

Use:

* `Dialog` for a focused task that blocks the page.
* `Drawer` for a long form or details panel that keeps page context visible.
* `Menu` for a list of actions.
* `Popover` for interactive content anchored to a trigger, without blocking the page.
* `Tooltip` to label an icon button.

Keep interactive content out of a `Tooltip`. Keyboard and touch users can't reach it.

### Copying Values

Use `Snippet` to show a command or value with its own copy button. Use `CopyButton` to add copying beside content you lay out yourself. Use `SecretValue` when the value must stay hidden until you reveal it.