unovue/reka-ui [email protected]

Tags: latest: 2.9.7

References: [Docs](./references/docs/_INDEX.md)

API Changes

This section documents version-specific API changes — prioritize recent major/minor releases.

• BREAKING: radix-vue renamed to reka-ui — CSS variables now use --reka- prefix and data attributes use data-reka- [source](./references/docs/content/docs/guides/migration.md)

• BREAKING: Combobox refactor — filter-function prop removed; searchTerm and displayValue props moved from Root to ComboboxInput [source](./references/docs/content/docs/guides/migration.md)

• BREAKING: Checkbox, Toggle, MenuCheckboxItem — bindings changed from v-model:checked or v-model:pressed to standard v-model [source](./references/docs/content/docs/guides/migration.md)

• BREAKING: DatePicker/Calendar — weekStartsOn is now locale-independent as of v2.8.0 [source](./references/releases/v2.8.0.md)

• BREAKING: Presence — forceMount now renders components regardless of active state; manual visibility handling (e.g. :hidden) is required [source](./references/docs/content/docs/guides/migration.md)

• BREAKING: Pagination — itemsPerPage prop is now required rather than having a default value [source](./references/docs/content/docs/guides/migration.md)

• NEW: Rating component — added for star/rating input interactions in v2.8.0 [source](./references/releases/v2.8.0.md)

• NEW: TimeField component — new primitive for localized time inputs introduced in v2.0.0 [source](./references/releases/v2.0.0.md)

• NEW: useFilter() — locale-aware string filtering utility (startsWith, endsWith, contains) added in v2.0.0 [source](./references/releases/v2.0.0.md)

• NEW: useLocale() / useDirection() — utility hooks for accessing the current configuration context [source](./references/releases/v2.6.0.md)

• NEW: ScrollArea glimpse mode — added ScrollAreaScrollbarGlimpse for transient scrollbar visibility [source](./references/releases/v2.8.0.md)

• NEW: Select disableOutsidePointerEvents — prop added to SelectContent to control interaction with outside elements [source](./references/releases/v2.7.0.md)

• NEW: ConfigProvider — global configuration component for locale, direction, and useId settings [source](./references/releases/v2.0.0.md)

• NEW: NumberField enhancements — added focusOnChange, readonly, and stepSnapping props [source](./references/releases/v2.8.0.md)

Also changed: Popover/Dialog programmatic close · Combobox openOnFocus props · Slider thumbAlignment prop · Toast disableSwipe prop · ContextMenu pressOpenDelay prop · Presence component exposed · calendar getWeekNumber utility · injectContext exposed · Collapsible/Accordion unmountOnHide prop

Best Practices

• Use the asChild prop to compose Reka's functionality onto your own Vue components or alternative DOM elements while maintaining accessibility [source](./references/docs/content/docs/guides/composition.md)

<TooltipTrigger asChild>
  <MyButton>Hover me</MyButton>
</TooltipTrigger>

• Utilize useForwardPropsEmits when building wrapper components to automatically forward all props and emits to the underlying Reka primitive [source](./references/docs/content/docs/utilities/use-forward-props-emits.md)

const props = defineProps<AccordionRootProps>()
const emits = defineEmits<AccordionRootEmits>()
const forwarded = useForwardPropsEmits(props, emits)
// Usage: <AccordionRoot v-bind="forwarded">

• Wrap your application with ConfigProvider to manage global reading direction (RTL) and prevent layout shifts during scroll locking [source](./references/docs/content/docs/utilities/config-provider.md)

<ConfigProvider dir="rtl" :scroll-body="false">
  <App />
</ConfigProvider>

• Apply useForwardExpose in components with multiple root nodes (fragments) to ensure that template refs correctly return the target DOM element [source](./references/docs/content/docs/utilities/use-forward-expose.md)

const { forwardRef } = useForwardExpose()
// Usage: <div :ref="forwardRef">...</div>

• Implement ComboboxVirtualizer or ListboxVirtualizer for large datasets to improve performance, ensuring the parent container has a fixed height [source](./references/docs/content/docs/guides/virtualization.md)

<ComboboxViewport class="max-h-80 overflow-y-auto">
  <ComboboxVirtualizer :options="items" :estimate-size="25" v-slot="{ option }">
    <ComboboxItem :value="option">{{ option.label }}</ComboboxItem>
  </ComboboxVirtualizer>
</ComboboxViewport>

• Use injectXContext functions (e.g., injectAccordionRootContext) to access internal primitive state for advanced custom child components [source](./references/docs/content/docs/guides/inject-context.md)

• Style component states by targeting data-state attributes (e.g., open, closed, active) instead of manually toggling classes [source](./references/docs/content/docs/guides/styling.md)

/* Preferred way to style open state */
.AccordionItem[data-state="open"] {
  border-bottom-width: 2px;
}

• Use the :deep() selector when styling teleported components (Dialog, Popover, Tooltip) within scoped Vue styles to reach the body-appended elements [source](./references/docs/content/docs/guides/styling.md)

• Enable force-mount on content parts when using JavaScript animation libraries or Vue <Transition> to delegate unmounting control to the library [source](./references/docs/content/docs/guides/animation.md)

<Transition name="fade">
  <DialogContent force-mount>...</DialogContent>
</Transition>

• Prefer Vue 3.5 native useId() over the Reka UI utility for stable SSR identifiers, as the library utility is deprecated for newer Vue versions [source](./references/docs/content/docs/utilities/use-id.md)