Preview
Loading preview…
root = Carousel(Media("https://images.unsplash.com/photo-1540959733332-eab4deabeeaf?w=900&q=75&auto=format&fit=crop", title:"Tokyo", subtitle:"Japan's capital", v:overlay), Media("https://images.unsplash.com/photo-1490806843957-31f4c9a91c65?w=900&q=75&auto=format&fit=crop", title:"Mount Fuji", subtitle:"Sacred peak", v:overlay), Media("https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?w=900&q=75&auto=format&fit=crop", title:"Kyoto", subtitle:"Temples and shrines", v:overlay), Media("https://images.unsplash.com/photo-1579871494447-9811cf80d66c?w=900&q=75&auto=format&fit=crop", title:"Sushi", subtitle:"Tsukiji market", v:overlay), per:3, nav:dots)Signature
This is the line a model reads in the system prompt.
Carousel(...children, per:num, nav:none|dots|bars|count, arrows:always|hover|none, autoplay:num)- Group: Layout
- Children: Yes: any component or text
- Positional arguments: none
Props
| Prop | Type | How to write it | Notes |
|---|---|---|---|
per |
number | named: per:… |
items visible at once |
nav |
none · dots · bars · count |
named: nav:… |
Default "none". |
arrows |
always · hover · none |
named: arrows:… |
Default "always". |
autoplay |
number | named: autoplay:… |
seconds per page |
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({ Carousel: MyCarousel });
<GistUI library={lib} stream={response.body} />;<GistUI :source="answer" :components="{ Carousel: MyCarousel }" /><GistUI source={answer} components={{ Carousel: MyCarousel }} /><GistUI source={answer()} components={{ Carousel: MyCarousel }} />import { ui } from "@gistui/vanilla/ui";
const lib = ui.extend({ Carousel: (ctx) => ({ el: myElement(ctx) }) });See Custom components for the full contract. Style hook: [data-gistui="Carousel"].