reka-ui-skilld

name	reka-ui-skilld
description	ALWAYS use when writing code importing "reka-ui". Consult for debugging, best practices, or modifying reka-ui, reka ui.
metadata	{"version":"2.9.2","generated_by":"Antigravity · claude-sonnet-4-6","generated_at":"2026-03-22T00:00:00.000Z"}

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

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