Reka UI Skilld

Reka UI reka-ui@2.10.5

Unstyled, accessible component primitives for Vue 3. Requires vue >= 3.4.0 (prepared source package.json:87-89). Docs: https://reka-ui.com

References

• API surface: entry points, every component part, utilities.
• Composition: asChild, prop forwarding, context injection, controlled state.
• Styling and animation: data-state, --reka- CSS variables, force-mount with <Transition>.
• New and changed components: Drawer, Autocomplete, Color primitives, Month/Year pickers, and version-specific prop changes.
• Integrations: namespaced entry, Nuxt module, component resolver, dates with @internationalized/date, virtualization.

Setup

pnpm add reka-ui   # or npm / yarn / bun

<script setup lang="ts">
import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle } from 'reka-ui'
</script>

<template>
  <DialogRoot>
    <DialogTrigger>Edit profile</DialogTrigger>
    <DialogPortal>
      <DialogOverlay />
      <DialogContent>
        <DialogTitle>Edit profile</DialogTitle>
      </DialogContent>
    </DialogPortal>
  </DialogRoot>
</template>

API changes (2.10.x and 2.9.x)

Prioritized recent releases. Baseline skill covered up to 2.9.7.

• NEW Drawer primitive (2.10.0): swipe dismiss, snap points, nested drawers. Parts: DrawerRoot/Trigger/Portal/Overlay/Content/Close/Title/Description/Handle/SwipeArea/Viewport/Indent/IndentBackground (prepared source src/Drawer/). Release: https://github.com/unovue/reka-ui/releases/tag/v2.10.0
• NEW ConfigProvider teleportTo prop: global default teleport target (prepared source src/ConfigProvider/ConfigProvider.vue:45)
• NEW DialogRoot unmountOnHide prop, default true; set false to keep content mounted when hidden (prepared source src/Dialog/DialogRoot.vue:20)
• NEW SelectRoot nullableValue prop for a hidden-input value representing the empty selection (prepared source src/Select/SelectRoot.vue:18)
• NEW HoverCardRoot enableTouch prop, default false (prepared source src/HoverCard/HoverCardRoot.vue:15)
• NEW DateFieldRoot stepSnapping prop, default false (prepared source src/DateField/DateFieldRoot.vue:57)
• NEW TreeItem disabled prop (2.10.0): https://github.com/unovue/reka-ui/releases/tag/v2.10.0
• NEW TabsIndicator exposes --reka-tabs-indicator-size, --reka-tabs-indicator-thickness, --reka-tabs-indicator-position CSS variables (prepared source src/Tabs/TabsIndicator.vue:73-75)
• Better type inference for useEmitAsProps and useForwardPropsEmits (2.10.0)
• NEW Autocomplete component (2.9.0), a Combobox-style input with its own Autocomplete* part family. Docs: https://reka-ui.com/docs/components/autocomplete
• NEW Color primitives (2.9.0): ColorArea*, ColorField*, ColorSlider*, ColorSwatch, ColorSwatchPicker*, plus color parse/convert utilities exported from the root
• NEW TimeRangeField (2.9.0): TimeRangeFieldRoot, TimeRangeFieldInput
• NEW Month and Year pickers (2.9.0): MonthPicker*, YearPicker* and MonthRangePicker*, YearRangePicker* families
• NEW CheckboxRoot/SwitchRoot custom boolean values: trueValue and falseValue props replace the fixed true/false (prepared source src/Checkbox/CheckboxRoot.vue:27-31)
• NEW DropdownMenuFilter part for searchable dropdown menus (2.9.0)
• NEW Splitter pixel sizing and constraints (2.9.0)
• NEW global tooltip content configuration via TooltipProvider (2.9.0)
• Menu internals exported from reka-ui/internal; unstable, may change without semver (prepared source src/internal.ts:1-7)

Earlier breaking changes still relevant when touching older code:

• radix-vue renamed to reka-ui; CSS variables use --reka- prefix and data attributes use data-reka-. Migration: https://reka-ui.com/docs/guides/migration
• Combobox refactor: filterFunction prop removed; searchTerm and displayValue moved from Root to ComboboxInput (migration guide above)
• Checkbox, Toggle, MenuCheckboxItem use standard v-model instead of v-model:checked / v-model:pressed (migration guide above)
• PaginationRoot itemsPerPage is required (migration guide above)
• weekStartsOn on Calendar/DatePicker is locale-independent since 2.8.0: https://github.com/unovue/reka-ui/releases/tag/v2.8.0

Release index: https://github.com/unovue/reka-ui/releases