Header | GistUI

Preview

Loading preview…

root = Header("Q3 revenue", "All regions · updated Oct 1", eyebrow:"Finance", size:lg)

Signature

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

Header(title, subtitle?, eyebrow:str, size:sm|md|lg|xl, align:start|center)

Group: Layout
Children: No
Positional arguments: title, subtitle? (a trailing ? means it may be left out)

Prop	Type	How to write it	Notes
`title`	string	positional, required
`subtitle`	string	positional, optional
`eyebrow`	string	named: `eyebrow:…`	small label above
`size`	`sm` · `md` · `lg` · `xl`	named: `size:…`
`align`	`start` · `center`	named: `align:…`

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

<GistUI :source="answer" :components="{ Header: MyHeader }" />

<GistUI source={answer} components={{ Header: MyHeader }} />

<GistUI source={answer()} components={{ Header: MyHeader }} />

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

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

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