Using reka-ui Primitives

@swift-web/framework is built on top of reka-ui, which is already installed as a direct dependency — no separate pnpm add is needed in your project.

Sw* components focus on business scenarios (encrypted images, chunked uploads, HLS players, rich-text editors, etc.), while general-purpose UI primitives (Select, Tooltip, Tabs, Accordion, Popover, etc.) are provided by reka-ui.

Direct Import

No registration needed — just import in <script setup>:

<script setup lang="ts">
import {
  SelectRoot,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
  SelectItemText,
} from 'reka-ui'

const city = ref('')
</script>

<template>
  <SelectRoot v-model="city">
    <SelectTrigger class="select-trigger">
      <SelectValue placeholder="Select a city" />
    </SelectTrigger>
    <SelectContent class="select-content">
      <SelectItem value="beijing">
        <SelectItemText>Beijing</SelectItemText>
      </SelectItem>
      <SelectItem value="shanghai">
        <SelectItemText>Shanghai</SelectItemText>
      </SelectItem>
    </SelectContent>
  </SelectRoot>
</template>

reka-ui is an unstyled primitives library — all visual styles must be written by you. It's recommended to create a dedicated CSS file under app/assets/styles/ for each component you use.

reka-ui Components Already Wrapped as Sw*

The following reka-ui primitives are already wrapped by the framework. Use the Sw* component directly — don't bypass the wrapper:

reka-ui Primitive	Sw* Component	What's Added
Dialog	`<SwModal>`	Imperative API, button slots, `useModal()`
Dialog	`<SwAdPopup>`	Ad popup scenarios (also Dialog-based, adds frequency capping + exposure tracking)
Toast	`<SwToast>`	Global queue, four semantic types, `useToast()`

Commonly Used reka-ui Primitives (Not Yet Wrapped)

Category	Components
Forms	Select, Checkbox, RadioGroup, TagsInput, PinInput, NumberField, Slider
Overlays	Tooltip, Popover, DropdownMenu, ContextMenu, HoverCard
Navigation	Tabs, NavigationMenu, Pagination, Accordion
Display	Avatar, Progress, ScrollArea, Separator
Advanced Input	Combobox, Editable, DateField, DatePicker

See the full list at reka-ui official docs.