Accordion | GistUI

Preview

Loading preview…

root = Accordion(Item("What is GistUI?", "A rendering engine for generative UI.", open), Item("Is it open source?", "Yes, under the MIT licence."), Item("Which frameworks?", "React, Vue, Svelte, Solid and vanilla JavaScript."))

Signature

This is the line a model reads in the system prompt.

Accordion(...Item, multiple)

Group: Layout
Children: Yes: Item
Positional arguments: none

Props

Prop	Type	How to write it	Notes
`multiple`	flag	bare word: `multiple`

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({ Accordion: MyAccordion });
<GistUI library={lib} stream={response.body} />;

<GistUI :source="answer" :components="{ Accordion: MyAccordion }" />

<GistUI source={answer} components={{ Accordion: MyAccordion }} />

<GistUI source={answer()} components={{ Accordion: MyAccordion }} />

import { ui } from "@gistui/vanilla/ui";

const lib = ui.extend({ Accordion: (ctx) => ({ el: myElement(ctx) }) });

See Custom components for the full contract. Style hook: [data-gistui="Accordion"].