Preview
Loading preview…
root = Gallery(["https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?w=900&q=75&auto=format&fit=crop", "https://images.unsplash.com/photo-1490806843957-31f4c9a91c65?w=900&q=75&auto=format&fit=crop", "https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?w=900&q=75&auto=format&fit=crop", "https://images.unsplash.com/photo-1579871494447-9811cf80d66c?w=900&q=75&auto=format&fit=crop"], captions:["Tokyo", "Mount Fuji", "Kyoto", "Sushi"], cols:4)A click opens a lightbox with previous and next.
Signature
This is the line a model reads in the system prompt.
Gallery(images:[str], captions:[str], cols:num, ratio:str, v:grid|strip)- Group: Content
- Children: No
- Positional arguments:
images(a trailing?means it may be left out)
Props
| Prop | Type | How to write it | Notes |
|---|---|---|---|
images |
list of string | positional, required | image URLs |
captions |
list of string | named: captions:… |
|
cols |
number | named: cols:… |
Default 3. |
ratio |
string | named: ratio:… |
thumbnail ratio, default 1:1 |
v |
grid · strip |
named: v:… |
Default "grid". |
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({ Gallery: MyGallery });
<GistUI library={lib} stream={response.body} />;<GistUI :source="answer" :components="{ Gallery: MyGallery }" /><GistUI source={answer} components={{ Gallery: MyGallery }} /><GistUI source={answer()} components={{ Gallery: MyGallery }} />import { ui } from "@gistui/vanilla/ui";
const lib = ui.extend({ Gallery: (ctx) => ({ el: myElement(ctx) }) });See Custom components for the full contract. Style hook: [data-gistui="Gallery"].