Preview
Loading preview…
root = Report(Sheet(Header("Cover page", "A report is made of sheets", size:lg, align:center), layout:center, bg:accent), title:"One sheet")A Sheet is only valid inside Report.
Signature
This is the line a model reads in the system prompt.
Sheet(...children, layout:top|center|split, bg:plain|inverse|accent|gradient, image:str)- Group: Layout
- Children: Yes: any component or text
- Positional arguments: none
Props
| Prop | Type | How to write it | Notes |
|---|---|---|---|
layout |
top · center · split |
named: layout:… |
|
bg |
plain · inverse · accent · gradient |
named: bg:… |
|
image |
string (URL) | named: image:… |
background photo URL (cover pages) |
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({ Sheet: MySheet });
<GistUI library={lib} stream={response.body} />;<GistUI :source="answer" :components="{ Sheet: MySheet }" /><GistUI source={answer} components={{ Sheet: MySheet }} /><GistUI source={answer()} components={{ Sheet: MySheet }} />import { ui } from "@gistui/vanilla/ui";
const lib = ui.extend({ Sheet: (ctx) => ({ el: myElement(ctx) }) });See Custom components for the full contract. Style hook: [data-gistui="Sheet"].