Preview
Loading preview…
root = Grid(Tile("Enterprise", "Largest segment", icon:building, value:"+14%", note:"QoQ"), Tile("Churn", "Down from 3.1%", icon:users, value:"-0.4pt", note:"QoQ"), Tile("Single supplier", "One vendor for all chips", icon:alert-triangle, tone:danger, body:"A delay there stops the whole line."), cols:3)Signature
This is the line a model reads in the system prompt.
Tile(title, subtitle?, icon:Icon2, value:str, note:str, body:str, tone:Tone, image:str, href:str, v:sunk|card|plain, do:[@step…], mono)- Group: Content
- Children: No
- Positional arguments:
title,subtitle?(a trailing?means it may be left out)
Props
| Prop | Type | How to write it | Notes |
|---|---|---|---|
title |
string | positional, required | |
subtitle |
string | positional, optional | |
icon |
name (open list) | named: icon:… |
Also accepts money, revenue, price, cost, payment, chart, analytics, trend, growth, decline, people, team, customers, person, company, office, location, place, travel, flight, food, restaurant, time, date, email, chat, security, idea, ai, launch, speed, energy, warning, error, success, video, movie, streaming, game, education, nature, health, legal, document, photo, shop, shopping, house, storage, api, winner, goal, sunny, clear, cloudy, partly-cloudy, rain, rainy, snow, storm, thunder, temperature, takeoff, departure, landing, arrival, baggage, seat, bag. |
value |
string | named: value:… |
+/- values are coloured |
mono |
flag | bare word: mono |
do not colour signed values |
note |
string | named: note:… |
under the value |
body |
string | named: body:… |
Markdown paragraph |
tone |
neutral · info · success · warning · danger · accent |
named: tone:… |
Also accepts error, red, green, blue, yellow, primary. |
image |
string (URL) | named: image:… |
|
href |
string | named: href:… |
|
v |
sunk · card · plain |
named: v:… |
Default "sunk". |
do |
action list | named: do:… |
steps run on click |
Use your own component
Keep the name and schema, swap what is drawn. The prompt and the model’s output do not change.
import { ui } from "@gistui/react/ui";
const lib = ui.extend({ Tile: MyTile });
<GistUI library={lib} stream={response.body} />;<GistUI :source="answer" :components="{ Tile: MyTile }" /><GistUI source={answer} components={{ Tile: MyTile }} /><GistUI source={answer()} components={{ Tile: MyTile }} />import { ui } from "@gistui/vanilla/ui";
const lib = ui.extend({ Tile: (ctx) => ({ el: myElement(ctx) }) });See Custom components for the full contract. Style hook: [data-gistui="Tile"].