Preview
Loading preview…
root = Slides(Slide(Header("One idea per slide", "Keep text short", size:lg), layout:center, bg:accent))A Slide is only valid inside Slides.
Signature
This is the line a model reads in the system prompt.
Slide(...children, layout:center|top|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 |
center · top · split |
named: layout:… |
|
bg |
plain · inverse · accent · gradient |
named: bg:… |
|
image |
string (URL) | named: image:… |
background photo URL |
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({ Slide: MySlide });
<GistUI library={lib} stream={response.body} />;<GistUI :source="answer" :components="{ Slide: MySlide }" /><GistUI source={answer} components={{ Slide: MySlide }} /><GistUI source={answer()} components={{ Slide: MySlide }} />import { ui } from "@gistui/vanilla/ui";
const lib = ui.extend({ Slide: (ctx) => ({ el: myElement(ctx) }) });See Custom components for the full contract. Style hook: [data-gistui="Slide"].