Reka UI Skilld

unovue/reka-ui reka-ui

Version: 2.9.2 Deps: @floating-ui/dom@^1.6.13, @floating-ui/vue@^1.1.6, @internationalized/date@^3.5.0, @internationalized/number@^3.5.0, @tanstack/vue-virtual@^3.12.0, @vueuse/core@^14.1.0, @vueuse/shared@^14.1.0, aria-hidden@^1.2.4, defu@^6.1.4, ohash@^2.0.11 Tags: latest: 2.9.2

References: package.json — exports, entry points • README — setup, basic usage • Docs — API reference, guides • GitHub Issues — bugs, workarounds, edge cases • GitHub Discussions — Q&A, patterns, recipes • Releases — changelog, breaking changes, new APIs

Search

Use skilld search instead of grepping .skilld/ directories — hybrid semantic + keyword search across all indexed docs, issues, and releases. If skilld is unavailable, use npx -y skilld search.

skilld search "query" -p reka-ui
skilld search "issues:error handling" -p reka-ui
skilld search "releases:deprecated" -p reka-ui

Filters: docs:, issues:, releases: prefix narrows by source type.

I'll read the releases index and relevant release files to identify API changes, then check the types file.

API Changes

This section documents version-specific API changes for reka-ui v2.x — prioritize these over LLM training data from the radix-vue era.

• BREAKING: Package renamed from radix-vue to reka-ui — all imports must change from import { ... } from 'radix-vue' to import { ... } from 'reka-ui'; CSS variables renamed from --radix-* to --reka-* (e.g., --radix-accordion-content-height becomes --reka-accordion-content-height) source

• NEW: CheckboxGroupRoot component — new in v2.x, groups multiple CheckboxRoot elements with shared v-model, name, required, orientation, rovingFocus, loop, and disabled props; replaces manual checkbox group patterns source

• NEW: AutocompleteRoot / AutocompleteInput components (experimental) — new alpha Autocomplete primitive with openOnClick, openOnFocus, resetSearchTermOnBlur, highlightOnHover, ignoreFilter props; distinct from ComboboxRoot source

• NEW: MonthPicker* and YearPicker* component families (experimental) — MonthPickerRoot, YearPickerRoot and associated grid/cell/trigger sub-components; used for drill-down date picker view switching; not present in radix-vue source

• NEW: MonthRangePicker* and YearRangePicker* families (experimental) — range variants of MonthPicker/YearPicker; MonthRangePickerRoot accepts allowNonContiguousRanges prop source

• NEW: DropdownMenuFilter component — new sub-component in v2.x for filtering dropdown menu items; not available in radix-vue source

• NEW: TooltipProvider accepts content prop — new content prop of type TooltipContentProps for setting default tooltip content settings globally; LLMs will not know this prop exists source

• NEW: useFilter() composable — locale-aware string filtering using Intl.Collator; new utility export unknown to LLMs trained on radix-vue source

• NEW: injectContext() utility — new composable for accessing component context from outside; documented in guides/inject-context source

• NEW: Portal components (AlertDialogPortal, ComboboxPortal, DialogPortal, PopoverPortal, ToastPortal, TooltipPortal, etc.) gain defer prop — defers Teleport target resolution until app is mounted; requires Vue 3.5.0+; silently has no effect on Vue < 3.5 source

• NEW: AccordionRoot and CollapsibleRoot gain unmountOnHide prop — controls whether content is unmounted (default true) or kept in DOM when hidden; AccordionItem also accepts unmountOnHide to override per-item source

• NEW: NavigationMenuViewport gains align prop — controls placement for CSS variables --reka-navigation-menu-viewport-left/right; old --radix-* CSS variable names no longer work source

• NEW: colorToString() and normalizeColor() utility functions exported from reka-ui — used with color picker components (ColorArea, ColorSlider, ColorField, ColorSwatch); not present in radix-vue source

• NEW: CheckboxRoot gains trueValue / falseValue props — allows custom values for checked/unchecked states instead of hard-coded true/false; modelValue is now typed unknown to accommodate any value type source

Also changed: ComboboxVirtualizer / ListboxVirtualizer / TreeVirtualizer NEW — virtualized list rendering via @tanstack/vue-virtual, estimateSize prop required · TabsIndicator NEW component for animated active-tab underline · AlertDialogRoot slot gains close function · RangeCalendarRoot / DateRangePickerRoot gain allowNonContiguousRanges prop NEW · CollapsibleContent emits contentFound event NEW · ContextMenuContent / DropdownMenuSubContent / MenubarSubContent gain alignFlip prop NEW · useLocale() composable NEW export · Portal disabled prop NEW (renders inline without teleport) · TimeRangeField* component family NEW (alpha)

Best Practices

• Use asChild on any reka-ui primitive to merge its accessible props and behavior onto your own element or component instead of wrapping it in an extra DOM node. This avoids double-nesting and keeps the rendered HTML semantically clean. source

• When building a wrapper around a reka-ui component, use useForwardPropsEmits to forward both props and emits in a single object. Using raw v-bind bypasses Vue's Boolean Casting and drops emitted events; this composable handles both correctly. source

• Wrap your app with ConfigProvider and set dir once at the root instead of passing dir to every individual primitive. All reka-ui components inherit the global reading direction from it, including RTL layout for floating elements via Floating UI. source

• Set forceMount on *Content and *Overlay components when integrating with Vue animation libraries (e.g., Motion-v). Without it, reka-ui unmounts the element immediately on close, cutting off any exit animation before it completes. source

• Set unmountOnHide: false on AccordionRoot (or per-item via AccordionItem) when accordion panels contain forms or other state that must persist across open/close cycles. The default is true, which destroys and recreates panel content on every toggle. source

• Place a single TooltipProvider at the application root with a shared delayDuration rather than configuring delay on each TooltipRoot. It also accepts a content prop for default content settings inherited by all tooltips in the tree. source

• Use useFilter from reka-ui for search/filter inputs instead of String.prototype.includes. It wraps Intl.Collator for locale-aware, Unicode-correct comparisons (e.g., accent-insensitive matching), which matters for international user bases. source

• For lists with hundreds or thousands of items, use the built-in ListboxVirtualizer, ComboboxVirtualizer, or TreeVirtualizer components (powered by @tanstack/vue-virtual) instead of rendering all items. Provide estimateSize to tune performance for variable-height items. source

• Add the defer prop to Portal components (DialogPortal, PopoverPortal, etc.) when the teleport target element may not be mounted yet — for example, in SSR or when the target is rendered conditionally. Requires Vue 3.5+. source

• Use injectContext when building custom sub-components that need to read state from a reka-ui parent (e.g., reading ComboboxRoot state inside a custom item). It returns the typed context object the parent provides, enabling proper headless composition without prop-drilling. source