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.
How to read a signature
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 | 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 | Vertical stack. | Stack(...children, gap:Gap, align:Align, justify:Justify) |
| Row | Horizontal row; wrap for responsive. | Row(...children, gap:Gap, align:Align, justify:Justify, wrap) |
| Grid | Responsive grid. | Grid(...children, cols:num, gap:Gap) |
| Cell | Grid cell spanning columns/rows. | Cell(...children, span:num, rows:num, gap:Gap) |
| 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 | Pushes siblings apart. | Spacer() |
| Card | Surface for related content. | Card(...children, v:card|sunk|outline|clear, gap:Gap, accent:Accent) |
| Header | Title with optional subtitle. | Header(title, subtitle?, eyebrow:str, size:sm|md|lg|xl, align:start|center) |
| Separator | A thin line between two parts of a layout. | Separator() |
| Tabs | Tabbed panels: one Tab is shown at a time. | Tabs(...Tab, v:line|pills, bind:$var) |
| Tab | One panel of a Tabs group, with its label. | Tab(label, ...children, icon:Icon2) |
| Accordion | A stack of collapsible sections. | Accordion(...Item, multiple) |
| Item | Collapsible accordion section. | Item(title, ...children, open) |
| 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 | Presentation; v:viewer adds a title bar, thumbnail rail and present button. | Slides(...Slide, title:str, subtitle:str, v:deck|viewer, ratio:str) |
| Report | PDF-style document of paper pages: thumbnails, zoom, Download PDF. | Report(...Sheet, title:str, subtitle:str, size:a4|letter) |
| Sheet | One report page; any content. | Sheet(...children, layout:top|center|split, bg:plain|inverse|accent|gradient, image:str) |
| Slide | One slide; any content. | Slide(...children, layout:center|top|split, bg:plain|inverse|accent|gradient, image:str) |
| Frame | Free-form box: layout and look all from style. | Frame(...children, style:{…}) |
| 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 | Markdown text (a string child is a Text). | Text(content, size:Size, align:start|center|end, muted) |
| Callout | A highlighted note, tip or warning. | Callout(content, title:str, tone:Tone, v:soft|bar, icon:Icon2) |
| Tag | A small label for a status or category. | Tag(label, tone:Tone, icon:Icon2, pill) |
| Tags | A wrapping row of tags. | Tags(...Tag) |
| Icon | One icon from the built-in set, in a tinted tile or plain. | Icon(name:Icon2, tone:Tone, size:Size, plain) |
| Image | One picture with an optional caption; zoom opens it full screen. | Image(src, alt?, caption:str, ratio:str, zoom) |
| Gallery | Photo grid; a click opens a lightbox with prev/next. | Gallery(images:[str], captions:[str], cols:num, ratio:str, v:grid|strip) |
| 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 | 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 | Citation card. | Source(title, url, site:str, icon:Icon2, image:str) |
| Quote | A quotation with its author. | Quote(text, by?) |
| Timeline | Steps/itinerary from a table |Title|Detail|Meta|State(done/current). | Timeline(data:data, numbered) |
| Code | Code block with highlighting and copy. | Code(code, lang:str, title:str, numbered) |
| Math | TeX formula. | Math(tex, inline) |
| Diagram | Mermaid diagram source. | Diagram(source, title:str) |
| Video | YouTube, Vimeo or an mp4/webm URL. | Video(src, title:str, poster:str, ratio:str) |
| Avatar | Person: photo or initials, name, role. | Avatar(name, subtitle?, src:str, size:Size) |
| FollowUps | Suggested next questions; a click sends one. | FollowUps(items:[str]) |
Data
| Component | What it is | Signature |
|---|---|---|
| KeyValue | Label/value pairs from a table |Key|Value. | KeyValue(data:data, cols:num) |
| Pricing | Plan cards from |Plan|Price|Period|Features (; separated)|Note. | Pricing(data:data, highlight:str, cta:str, do:[@step…]) |
| Table | Long tables page automatically. | Table(data:data, pageSize:num, sortable:[str], order:str, filter:[str], tags:[str], sort, search, striped) |
| Stat | One KPI. | Stat(label, value, delta?, note:str, icon:Icon2, spark:[num], invert) |
| Stats | KPI row from a table |Label|Value|Delta|Note. | Stats(data:data) |
| Progress | A progress bar with a label and a note. | Progress(value:num, label?, max:num, note:str, tone:Tone) |
| 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 | 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 | One step of a step form; validated before Continue. | Step(title, ...children, hint:str) |
| 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 | 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 | 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 | 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 | 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 | 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 | 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 | 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 | A single checkbox, for consent or one yes/no setting. | Checkbox(name, label, bind:$var, error:str, checked, required) |
| DatePicker | 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 | 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 | 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 | An on/off toggle. | Switch(name, label, bind:$var, checked) |
| 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 | A row of buttons. | Buttons(...Button, align:start|end) |