Preview
Loading preview…
root = Hero("Ship generative UI in an afternoon", "Stream a program, render it natively, keep your design system.", eyebrow:"GistUI", image:"https://images.unsplash.com/photo-1498050108023-c5249f4df085?w=1200&q=75&auto=format&fit=crop", cta:"Start free")Signature
This is the line a model reads in the system prompt.
Hero(title, subtitle?, eyebrow:str, image:str, cta:str, href:str, do:[@step…], align:start|center)- Group: Layout
- Children: No
- Positional arguments:
title,subtitle?(a trailing?means it may be left out)
Props
| Prop | Type | How to write it | Notes |
|---|---|---|---|
title |
string | positional, required | |
subtitle |
string | positional, optional | |
eyebrow |
string | named: eyebrow:… |
|
image |
string (URL) | named: image:… |
|
cta |
string | named: cta:… |
|
href |
string | named: href:… |
|
do |
action list | named: do:… |
steps run on click |
align |
start · center |
named: align:… |
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({ Hero: MyHero });
<GistUI library={lib} stream={response.body} />;<GistUI :source="answer" :components="{ Hero: MyHero }" /><GistUI source={answer} components={{ Hero: MyHero }} /><GistUI source={answer()} components={{ Hero: MyHero }} />import { ui } from "@gistui/vanilla/ui";
const lib = ui.extend({ Hero: (ctx) => ({ el: myElement(ctx) }) });See Custom components for the full contract. Style hook: [data-gistui="Hero"].