# Tempo Design System

> Foundations, guidelines, and components for Tempo products.

Each link opens a page's Markdown. [llms-full.txt](https://ds.tehq.dev/llms-full.txt) holds every page in one file.

## Components

### Actions

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

### Forms and Inputs

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

### Feedback and Status

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

### Overlays

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

### Navigation

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

### Layout

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

### Data Display

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

### Blockchain

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