Preview
Loading preview…
root = Page(Header("Weekly report", "Week 40"), Callout("All systems normal.", tone:success), gap:lg, width:narrow, accent:teal)accent sets the colour theme for everything inside the page.
Signature
This is the line a model reads in the system prompt.
Page(...children, gap:Gap, width:full|wide|narrow, accent:Accent, radius:none|sm|md|lg|xl, density:compact|comfortable|spacious)- Group: Layout
- Children: Yes: any component or text
- Positional arguments: none
Props
| Prop | Type | How to write it | Notes |
|---|---|---|---|
gap |
none · xs · sm · md · lg · xl |
named: gap:… |
Also accepts small, medium, large. |
width |
full · wide · narrow |
named: width:… |
|
accent |
neutral · slate · stone · rose · pink · violet · indigo · blue · teal · green · orange · amber · red |
named: accent:… |
Also accepts purple, gray, grey, zinc, yellow. |
radius |
none · sm · md · lg · xl |
named: radius:… |
|
density |
compact · comfortable · spacious |
named: density:… |
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({ Page: MyPage });
<GistUI library={lib} stream={response.body} />;<GistUI :source="answer" :components="{ Page: MyPage }" /><GistUI source={answer} components={{ Page: MyPage }} /><GistUI source={answer()} components={{ Page: MyPage }} />import { ui } from "@gistui/vanilla/ui";
const lib = ui.extend({ Page: (ctx) => ({ el: myElement(ctx) }) });See Custom components for the full contract. Style hook: [data-gistui="Page"].