---
title: "Components"
description: "All 63 components in GistUI's default catalog, with the signature a model writes and a link to each one's props and live example."
---

> Documentation Index
> Fetch the complete documentation index at: https://gistui.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Components

GistUI ships **63 components** in four groups. They look and behave the same in React, Vue, Svelte, Solid and vanilla JavaScript, because every renderer shares one catalog and one stylesheet.

Each component has a page with a live example, the signature a model reads, and every prop.

> **For agents**
>
> The whole catalog as one text block is the system prompt itself: see [The full reference](/docs/language/reference/). Machine-readable schemas come from `import { components } from "@gistui/catalog"`.

## How to read a signature

```gistui
Stat(label, value, delta?, note:str, icon:Icon2, spark:[num], invert)
```

- `label`, `value`: positional and required. `delta?`: positional, may be left out.
- `note:str`: optional, always written by name (`note:"vs Q2"`).
- `invert`: a flag. Writing the bare word turns it on.
- `...children`: any number of components or strings after the positionals.

## Layout

| Component | What it is | Signature |
|---|---|---|
| [Page](/docs/components/layout/page/) | Top-level container; accent sets the colour theme. | `Page(...children, gap:Gap, width:full\|wide\|narrow, accent:Accent, radius:none\|sm\|md\|lg\|xl, density:compact\|comfortable\|spacious)` |
| [Stack](/docs/components/layout/stack/) | Vertical stack. | `Stack(...children, gap:Gap, align:Align, justify:Justify)` |
| [Row](/docs/components/layout/row/) | Horizontal row; wrap for responsive. | `Row(...children, gap:Gap, align:Align, justify:Justify, wrap)` |
| [Grid](/docs/components/layout/grid/) | Responsive grid. | `Grid(...children, cols:num, gap:Gap)` |
| [Cell](/docs/components/layout/cell/) | Grid cell spanning columns/rows. | `Cell(...children, span:num, rows:num, gap:Gap)` |
| [Box](/docs/components/layout/box/) | Free layout: direction, alignment, padding, surface. | `Box(...children, dir:Dir, gap:Gap, align:Align, justify:Justify, pad:none\|sm\|md\|lg\|xl, surface:none\|card\|sunk\|tint\|outline\|inverse\|accent\|gradient, w:num, text:start\|center\|end, accent:Accent, wrap, fill, grow)` |
| [Spacer](/docs/components/layout/spacer/) | Pushes siblings apart. | `Spacer()` |
| [Card](/docs/components/layout/card/) | Surface for related content. | `Card(...children, v:card\|sunk\|outline\|clear, gap:Gap, accent:Accent)` |
| [Header](/docs/components/layout/header/) | Title with optional subtitle. | `Header(title, subtitle?, eyebrow:str, size:sm\|md\|lg\|xl, align:start\|center)` |
| [Separator](/docs/components/layout/separator/) | A thin line between two parts of a layout. | `Separator()` |
| [Tabs](/docs/components/layout/tabs/) | Tabbed panels: one Tab is shown at a time. | `Tabs(...Tab, v:line\|pills, bind:$var)` |
| [Tab](/docs/components/layout/tab/) | One panel of a Tabs group, with its label. | `Tab(label, ...children, icon:Icon2)` |
| [Accordion](/docs/components/layout/accordion/) | A stack of collapsible sections. | `Accordion(...Item, multiple)` |
| [Item](/docs/components/layout/item/) | Collapsible accordion section. | `Item(title, ...children, open)` |
| [Carousel](/docs/components/layout/carousel/) | Horizontal strip of cards with arrows; nav adds page indicators. | `Carousel(...children, per:num, nav:none\|dots\|bars\|count, arrows:always\|hover\|none, autoplay:num)` |
| [Slides](/docs/components/layout/slides/) | Presentation; v:viewer adds a title bar, thumbnail rail and present button. | `Slides(...Slide, title:str, subtitle:str, v:deck\|viewer, ratio:str)` |
| [Report](/docs/components/layout/report/) | PDF-style document of paper pages: thumbnails, zoom, Download PDF. | `Report(...Sheet, title:str, subtitle:str, size:a4\|letter)` |
| [Sheet](/docs/components/layout/sheet/) | One report page; any content. | `Sheet(...children, layout:top\|center\|split, bg:plain\|inverse\|accent\|gradient, image:str)` |
| [Slide](/docs/components/layout/slide/) | One slide; any content. | `Slide(...children, layout:center\|top\|split, bg:plain\|inverse\|accent\|gradient, image:str)` |
| [Frame](/docs/components/layout/frame/) | Free-form box: layout and look all from style. | `Frame(...children, style:{…})` |
| [Hero](/docs/components/layout/hero/) | Big intro: eyebrow, title, subtitle, image, call to action. | `Hero(title, subtitle?, eyebrow:str, image:str, cta:str, href:str, do:[@step…], align:start\|center)` |

## Content

| Component | What it is | Signature |
|---|---|---|
| [Text](/docs/components/content/text/) | Markdown text (a string child is a Text). | `Text(content, size:Size, align:start\|center\|end, muted)` |
| [Callout](/docs/components/content/callout/) | A highlighted note, tip or warning. | `Callout(content, title:str, tone:Tone, v:soft\|bar, icon:Icon2)` |
| [Tag](/docs/components/content/tag/) | A small label for a status or category. | `Tag(label, tone:Tone, icon:Icon2, pill)` |
| [Tags](/docs/components/content/tags/) | A wrapping row of tags. | `Tags(...Tag)` |
| [Icon](/docs/components/content/icon/) | One icon from the built-in set, in a tinted tile or plain. | `Icon(name:Icon2, tone:Tone, size:Size, plain)` |
| [Image](/docs/components/content/image/) | One picture with an optional caption; zoom opens it full screen. | `Image(src, alt?, caption:str, ratio:str, zoom)` |
| [Gallery](/docs/components/content/gallery/) | Photo grid; a click opens a lightbox with prev/next. | `Gallery(images:[str], captions:[str], cols:num, ratio:str, v:grid\|strip)` |
| [Media](/docs/components/content/media/) | Image card: photo, tag, title (places, products, articles). | `Media(src, title:str, subtitle:str, tag:str, meta:str, v:below\|overlay\|cover, ratio:str, href:str, alt:str, do:[@step…], zoom)` |
| [Tile](/docs/components/content/tile/) | Row with icon, title/subtitle and a value on the right; body adds a paragraph. | `Tile(title, subtitle?, icon:Icon2, value:str, note:str, body:str, tone:Tone, image:str, href:str, v:sunk\|card\|plain, do:[@step…], mono)` |
| [Source](/docs/components/content/source/) | Citation card. | `Source(title, url, site:str, icon:Icon2, image:str)` |
| [Quote](/docs/components/content/quote/) | A quotation with its author. | `Quote(text, by?)` |
| [Timeline](/docs/components/content/timeline/) | Steps/itinerary from a table \|Title\|Detail\|Meta\|State(done/current). | `Timeline(data:data, numbered)` |
| [Code](/docs/components/content/code/) | Code block with highlighting and copy. | `Code(code, lang:str, title:str, numbered)` |
| [Math](/docs/components/content/math/) | TeX formula. | `Math(tex, inline)` |
| [Diagram](/docs/components/content/diagram/) | Mermaid diagram source. | `Diagram(source, title:str)` |
| [Video](/docs/components/content/video/) | YouTube, Vimeo or an mp4/webm URL. | `Video(src, title:str, poster:str, ratio:str)` |
| [Avatar](/docs/components/content/avatar/) | Person: photo or initials, name, role. | `Avatar(name, subtitle?, src:str, size:Size)` |
| [FollowUps](/docs/components/content/follow-ups/) | Suggested next questions; a click sends one. | `FollowUps(items:[str])` |

## Data

| Component | What it is | Signature |
|---|---|---|
| [KeyValue](/docs/components/data/key-value/) | Label/value pairs from a table \|Key\|Value. | `KeyValue(data:data, cols:num)` |
| [Pricing](/docs/components/data/pricing/) | Plan cards from \|Plan\|Price\|Period\|Features (; separated)\|Note. | `Pricing(data:data, highlight:str, cta:str, do:[@step…])` |
| [Table](/docs/components/data/table/) | Long tables page automatically. | `Table(data:data, pageSize:num, sortable:[str], order:str, filter:[str], tags:[str], sort, search, striped)` |
| [Stat](/docs/components/data/stat/) | One KPI. | `Stat(label, value, delta?, note:str, icon:Icon2, spark:[num], invert)` |
| [Stats](/docs/components/data/stats/) | KPI row from a table \|Label\|Value\|Delta\|Note. | `Stats(data:data)` |
| [Progress](/docs/components/data/progress/) | A progress bar with a label and a note. | `Progress(value:num, label?, max:num, note:str, tone:Tone)` |
| [Chart](/docs/components/data/chart/) | Chart from a table: first column = x, other columns = series. | `Chart(data:data, type:bar\|hbar\|line\|area\|pie\|donut\|scatter, title:str, subtitle:str, x:str, y:str, height:num, select:point\|range, bind:$var, stacked, zoom, legend)` |

## Forms

| Component | What it is | Signature |
|---|---|---|
| [Form](/docs/components/forms/form/) | Validates on submit; Step children make a step form. | `Form(name, ...children, id:str, validate:submit\|blur\|change, success:str, submit:str, draft:str)` |
| [Step](/docs/components/forms/step/) | One step of a step form; validated before Continue. | `Step(title, ...children, hint:str)` |
| [Dialog](/docs/components/forms/dialog/) | Modal or side drawer; open with Button(opens:id) or trigger:. | `Dialog(title, ...children, subtitle:str, v:modal\|drawer, side:right\|left\|bottom, size:sm\|md\|lg\|xl, trigger:str, icon:Icon2)` |
| [Input](/docs/components/forms/input/) | A one-line field for text, email, number, password, URL, phone or date. | `Input(name, label, type:text\|email\|number\|password\|url\|tel\|date, placeholder:str, value:str, min:num, max:num, minLength:num, maxLength:num, pattern:str, match:str, protocols:[str], error:str, bind:$var, size:Size, hint:str, required)` |
| [TextArea](/docs/components/forms/text-area/) | A field for longer text. | `TextArea(name, label, placeholder:str, value:str, rows:num, minLength:num, maxLength:num, error:str, bind:$var, size:Size, hint:str, required)` |
| [Select](/docs/components/forms/select/) | A dropdown for one choice, or several with multiple. | `Select(name, label, options:[str], placeholder:str, value:any, error:str, bind:$var, size:Size, hint:str, multiple, required)` |
| [Combobox](/docs/components/forms/combobox/) | Searchable select; multiple shows chips. | `Combobox(name, label, options:[str], placeholder:str, value:any, error:str, bind:$var, size:Size, hint:str, multiple, required)` |
| [RadioGroup](/docs/components/forms/radio-group/) | Pick one; v:cards (icons/images, hints), v:segmented toggle bar. | `RadioGroup(name, label, options:[str], hints:[str], icons:[str], images:[str], cols:num, value:str, v:list\|cards\|segmented, dir:Dir, error:str, bind:$var, size:Size, hint:str, required)` |
| [CheckboxGroup](/docs/components/forms/checkbox-group/) | Pick many; v:cards (icons/images, hints), v:chips toggle pills. | `CheckboxGroup(name, label, options:[str], hints:[str], icons:[str], images:[str], cols:num, value:[str], min:num, max:num, error:str, v:list\|cards\|chips, dir:Dir, bind:$var, size:Size, hint:str, required)` |
| [TagInput](/docs/components/forms/tag-input/) | Free-form tags (Enter adds); options are suggestions. | `TagInput(name, label, options:[str], value:[str], type:text\|email\|url, placeholder:str, min:num, max:num, error:str, bind:$var, size:Size, hint:str, required)` |
| [Checkbox](/docs/components/forms/checkbox/) | A single checkbox, for consent or one yes/no setting. | `Checkbox(name, label, bind:$var, error:str, checked, required)` |
| [DatePicker](/docs/components/forms/date-picker/) | A calendar field for a date, a date range, or a date and time. | `DatePicker(name, label, value:any, min:str, max:str, bind:$var, hint:str, error:str, size:Size, required, range, presets, time)` |
| [TimePicker](/docs/components/forms/time-picker/) | A field for a time of day, with a list of times at a fixed step. | `TimePicker(name, label, step:num, min:str, max:str, value:str, placeholder:str, error:str, bind:$var, hint:str, size:Size, required)` |
| [Slider](/docs/components/forms/slider/) | A slider for a number in a range. | `Slider(name, label, min:num, max:num, step:num, value:num, unit:str, bind:$var, hint:str)` |
| [Switch](/docs/components/forms/switch/) | An on/off toggle. | `Switch(name, label, bind:$var, checked)` |
| [Button](/docs/components/forms/button/) | Do: runs steps, opens:dialog, close, href link; else sends its label. | `Button(label, do:[@step…], opens:Dialog, type:button\|submit\|reset\|draft, v:primary\|accent\|secondary\|ghost\|link\|danger, icon:Icon2, href:str, size:Size, close, full, iconOnly, disabled)` |
| [Buttons](/docs/components/forms/buttons/) | A row of buttons. | `Buttons(...Button, align:start\|end)` |

Source: https://gistui.com/docs/components/index.mdx