---
title: "Reka UI"
description: "Use Reka UI primitives to draw GistUI components in Vue, with form validation and bind:$var still working."
---

> Documentation Index
> Fetch the complete documentation index at: https://gistui.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Reka UI

For Vue apps that use [Reka UI](https://reka-ui.com) (formerly Radix Vue) primitives directly. If you use shadcn-vue, which is built on Reka UI, start with [shadcn-vue](/docs/ui-libraries/shadcn-vue/).

```sh
npm i @gistui/vue @gistui/styles @gistui/catalog reka-ui
yarn add @gistui/vue @gistui/styles @gistui/catalog reka-ui
pnpm add @gistui/vue @gistui/styles @gistui/catalog reka-ui
bun add @gistui/vue @gistui/styles @gistui/catalog reka-ui
```

## A switch

Reka UI form primitives render a hidden native input when given `name`, so the GistUI Form around them can read the value.

```vue title="GistSwitch.vue"
<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

```vue title="GistCard.vue"
<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

```vue
<GistUI :source="answer" :streaming="loading" :components="{ Switch: GistSwitch, Card: GistCard }" @action="onAction" />
```

## Notes

- `useGistField` returns a ref: in the template it is unwrapped (`field.name`); in script it is `field.value.name`.
- Keep GistUI's built-in `Button` and style it with [tokens](/docs/guides/theming/): 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.

Source: https://gistui.com/docs/ui-libraries/reka-ui/index.mdx