Preview
Loading preview…
root = Row(Button("Invite teammates", opens:dlg, icon:users), Button("Filters", opens:drawer, v:secondary))
dlg = Dialog("Invite teammates", Form("invite", TagInput("emails", "Email addresses", type:email, required), Buttons(Button("Cancel", v:ghost, close), Button("Send"), align:end)), subtitle:"They get an email with a link.")
drawer = Dialog("Filters", CheckboxGroup("status", "Status", ["Active", "Onboarding", "At risk"], v:chips), Buttons(Button("Done", close), align:end), v:drawer, side:right)Signature
This is the line a model reads in the system prompt.
Dialog(title, ...children, subtitle:str, v:modal|drawer, side:right|left|bottom, size:sm|md|lg|xl, trigger:str, icon:Icon2)- Group: Forms
- Children: Yes: any component or text
- Positional arguments:
title(a trailing?means it may be left out)
Props
| Prop | Type | How to write it | Notes |
|---|---|---|---|
title |
string | positional, required | |
subtitle |
string | named: subtitle:… |
|
v |
modal · drawer |
named: v:… |
Default "modal". |
side |
right · left · bottom |
named: side:… |
Default "right". |
size |
sm · md · lg · xl |
named: size:… |
Default "md". |
trigger |
string | named: trigger:… |
label of its own open button |
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. |
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({ Dialog: MyDialog });
<GistUI library={lib} stream={response.body} />;<GistUI :source="answer" :components="{ Dialog: MyDialog }" /><GistUI source={answer} components={{ Dialog: MyDialog }} /><GistUI source={answer()} components={{ Dialog: MyDialog }} />import { ui } from "@gistui/vanilla/ui";
const lib = ui.extend({ Dialog: (ctx) => ({ el: myElement(ctx) }) });See Custom components for the full contract. Style hook: [data-gistui="Dialog"].