A generated answer should look like the app around it. GistUI lets you draw any of its components with the library you already use, while the model keeps writing the same GistUI Lang. The prompt does not change, so accuracy and token cost do not change either.
Pick your library
| Library | Framework | Page |
|---|---|---|
| shadcn/ui | React | shadcn/ui |
| shadcn-vue | Vue | shadcn-vue |
| shadcn-svelte | Svelte | shadcn-svelte |
| Radix UI primitives | React | Radix UI |
| Reka UI | Vue | Reka UI |
| Bits UI | Svelte | Bits UI |
| Kobalte | Solid | Kobalte |
| MUI (Material UI) | React | MUI |
Using something else (Mantine, Chakra, Ant Design, PrimeVue, Skeleton, your own design system)? The method is the same: see Any other library.
Two ways to match your app
1. Tokens only. Point GistUI’s theme tokens at your library’s CSS variables. Every built-in component (charts, tables, pickers, dialogs) then uses your colours, radius and font. This takes five minutes and covers all 63 components.
2. Swap components. Replace the ones people notice most (Card, Button, Input, Select, Checkbox) with your library’s. Everything else stays GistUI’s, themed by the tokens, so both read as one design system.
Most apps do both.
What keeps working when you swap
A swapped component is still part of the runtime, through one small helper per framework:
| Helper | Gives you | |
|---|---|---|
| React | useGistField(props), useGistButton(props) |
field state; button behaviour |
| Vue | useGistField(props) |
field state |
| Svelte | gistField(() => p.ctx) |
field state |
| Solid | createGistField(props) |
field state |
| Vanilla | formField(ctx, onChange) |
field state |
Field state is name, label, required, error, locked, bound, value, setValue. With it your field is validated by the Form around it, shows its error, and works with bind:$var.
Button behaviour (React) covers do: action lists, submit and draft in a form, opens: dialogs and links.
The one rule for fields
The Form reads values from native form controls. So render a native control with name, or use a library component that renders a hidden one when given name (Radix, Reka UI, Bits UI and Kobalte all do).
Any other library
- Import GistUI’s stylesheet before your library’s and your app’s CSS.
- Map tokens to your library’s variables with
tokens. - For each component you want to replace, write a small wrapper that reads
props(already validated) and renders your component. - In a field wrapper, call the field helper and pass
name,disabled={locked}and the error. - Register the wrappers:
ui.extend({ … })in React and vanilla,components={{ … }}in Vue, Svelte and Solid.
The full contract is in Custom components.