Preview
Loading preview…
root = Timeline(plan)
plan = |Title|Detail|Meta|State
|Design|Wireframes and review|Week 1|done
|Build|Core screens|Weeks 2–4|current
|Launch|Public release|Week 6|The table columns are Title, Detail, Meta and State (done or current).
Signature
This is the line a model reads in the system prompt.
Timeline(data:data, numbered)- Group: Content
- Children: No
- Positional arguments:
data(a trailing?means it may be left out)
Props
| Prop | Type | How to write it | Notes |
|---|---|---|---|
data |
table | positional, required | |
numbered |
flag | bare word: numbered |
Default true. |
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({ Timeline: MyTimeline });
<GistUI library={lib} stream={response.body} />;<GistUI :source="answer" :components="{ Timeline: MyTimeline }" /><GistUI source={answer} components={{ Timeline: MyTimeline }} /><GistUI source={answer()} components={{ Timeline: MyTimeline }} />import { ui } from "@gistui/vanilla/ui";
const lib = ui.extend({ Timeline: (ctx) => ({ el: myElement(ctx) }) });See Custom components for the full contract. Style hook: [data-gistui="Timeline"].