GistUI Docs

root = Page(head, kpis, Grid(trend, mix, cols:2), more, accent:orange)
head = Header("Q3 revenue", "All regions · updated Oct 1")
kpis = Stats(kpiData)
trend = Card(Chart(rev, type:area, title:"Monthly revenue", y:"USD"))
mix = Card(Chart(channels, type:donut, title:"By channel"))
more = FollowUps(["Compare with Q2", "Show top customers"])
kpiData = |Label|Value|Delta|Note
|Revenue|$1.2M|+8%|vs Q2
|Customers|3,410|+2.1%|vs Q2
|Churn|1.8%|-0.4pt|vs Q2
rev = |Month|Revenue
|Jul|380000
|Aug|402000
|Sep|431000
channels = |Channel|Share
|Organic|46
|Paid|31
|Partners|23

root = Card(Header("Invite teammates", "They get an email with a link", size:sm), form)
form = Form("invite", TagInput("emails", "Email addresses", type:email, required), RadioGroup("role", "Role", ["Viewer", "Editor", "Admin"], v:segmented, value:"Editor"), Slider("seats", "Seats", min:1, max:20, value:5, unit:" seats"), Checkbox("terms", "I accept the terms", required), submit:"Send invites", success:"Invites sent.")

$plan = "Team"
$seats = 12
root = Card(Header("Price calculator", size:sm), RadioGroup("plan", "Plan", ["Starter", "Team", "Enterprise"], v:segmented, bind:$plan), Slider("seats", "Seats", min:1, max:100, bind:$seats, unit:" seats"), Stat("Monthly cost", @fmt($seats * ($plan == "Starter" ? 0 : $plan == "Team" ? 29 : 79), "$"), note:$plan + " plan · " + $seats + " seats"))