For Vue apps that use Reka UI (formerly Radix Vue) primitives directly. If you use shadcn-vue, which is built on Reka UI, start with shadcn-vue.
npm i @gistui/vue @gistui/styles @gistui/catalog reka-uiyarn add @gistui/vue @gistui/styles @gistui/catalog reka-uipnpm add @gistui/vue @gistui/styles @gistui/catalog reka-uibun add @gistui/vue @gistui/styles @gistui/catalog reka-uiA switch
Reka UI form primitives render a hidden native input when given name, so the GistUI Form around them can read the value.
<script setup lang="ts">
import { useId } from "vue";
import { SwitchRoot, SwitchThumb } from "reka-ui";
import { useGistField, type GistUIComponentProps } from "@gistui/vue";
const p = defineProps<GistUIComponentProps>();
const id = useId();
const field = useGistField(p, "bool"); // one on/off value
</script>
<template>
<div class="switch-row">
<SwitchRoot
:id="id"
:name="field.name"
:disabled="field.locked"
:model-value="field.bound ? field.value === true : undefined"
:default-value="field.bound ? undefined : p.props.checked === true"
class="switch"
@update:model-value="(on) => field.bound && field.setValue(on)"
>
<SwitchThumb class="switch-thumb" />
</SwitchRoot>
<label :for="id">{{ field.label }}</label>
</div>
</template>A card
<script setup lang="ts">
import { GistChildren, type GistUIComponentProps } from "@gistui/vue";
defineProps<GistUIComponentProps>();
</script>
<template>
<section class="my-card" data-gistui="Card"><GistChildren /></section>
</template>Register them
<GistUI :source="answer" :streaming="loading" :components="{ Switch: GistSwitch, Card: GistCard }" @action="onAction" />Notes
useGistFieldreturns a ref: in the template it is unwrapped (field.name); in script it isfield.value.name.- Keep GistUI’s built-in
Buttonand style it with tokens: actions, form submits and dialogs then keep working. - Reka UI ships no styles. Use tokens so the GistUI components you did not replace match yours.