reka-ui-skilld
starsforks
How to install reka-ui-skilld?
skilld-dev/vue-ecosystem-skills/reka-ui-skilld
$npx -y skills add skilld-dev/vue-ecosystem-skills --skill reka-ui-skilldVue port for Radix UI Primitives. ALWAYS use when writing code importing \"reka-ui\". Consult for debugging, best practices, or modifying reka-ui, reka ui.
SKILL.md
| 1 | # unovue/reka-ui `reka-ui@2.9.7` |
| 2 | **Tags:** latest: 2.9.7 |
| 3 | |
| 4 | **References:** [Docs](./references/docs/_INDEX.md) |
| 5 | ## API Changes |
| 6 | |
| 7 | This section documents version-specific API changes — prioritize recent major/minor releases. |
| 8 | |
| 9 | - 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) |
| 10 | |
| 11 | - BREAKING: `Combobox` refactor — `filter-function` prop removed; `searchTerm` and `displayValue` props moved from Root to `ComboboxInput` [source](./references/docs/content/docs/guides/migration.md) |
| 12 | |
| 13 | - 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) |
| 14 | |
| 15 | - BREAKING: `DatePicker/Calendar` — `weekStartsOn` is now locale-independent as of v2.8.0 [source](./references/releases/v2.8.0.md) |
| 16 | |
| 17 | - 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) |
| 18 | |
| 19 | - BREAKING: `Pagination` — `itemsPerPage` prop is now required rather than having a default value [source](./references/docs/content/docs/guides/migration.md) |
| 20 | |
| 21 | - NEW: `Rating` component — added for star/rating input interactions in v2.8.0 [source](./references/releases/v2.8.0.md) |
| 22 | |
| 23 | - NEW: `TimeField` component — new primitive for localized time inputs introduced in v2.0.0 [source](./references/releases/v2.0.0.md) |
| 24 | |
| 25 | - NEW: `useFilter()` — locale-aware string filtering utility (startsWith, endsWith, contains) added in v2.0.0 [source](./references/releases/v2.0.0.md) |
| 26 | |
| 27 | - NEW: `useLocale()` / `useDirection()` — utility hooks for accessing the current configuration context [source](./references/releases/v2.6.0.md) |
| 28 | |
| 29 | - NEW: `ScrollArea` glimpse mode — added `ScrollAreaScrollbarGlimpse` for transient scrollbar visibility [source](./references/releases/v2.8.0.md) |
| 30 | |
| 31 | - NEW: `Select` `disableOutsidePointerEvents` — prop added to `SelectContent` to control interaction with outside elements [source](./references/releases/v2.7.0.md) |
| 32 | |
| 33 | - NEW: `ConfigProvider` — global configuration component for locale, direction, and `useId` settings [source](./references/releases/v2.0.0.md) |
| 34 | |
| 35 | - NEW: `NumberField` enhancements — added `focusOnChange`, `readonly`, and `stepSnapping` props [source](./references/releases/v2.8.0.md) |
| 36 | |
| 37 | **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 |
| 38 | |
| 39 | ## Best Practices |
| 40 | |
| 41 | - 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) |
| 42 | |
| 43 | ```vue |
| 44 | |
| 45 | <TooltipTrigger asChild> |
| 46 | <MyButton>Hover me</MyButton> |
| 47 | </TooltipTrigger> |
| 48 | ``` |
| 49 | |
| 50 | - 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) |
| 51 | |
| 52 | ```ts |
| 53 | const props = defineProps<AccordionRootProps>() |
| 54 | const emits = defineEmits<AccordionRootEmits>() |
| 55 | const forwarded = useForwardPropsEmits(props, emits) |
| 56 | // Usage: <AccordionRoot v-bind="forwarded"> |
| 57 | ``` |
| 58 | |
| 59 | - 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) |
| 60 | |
| 61 | ```vue |
| 62 | <ConfigProvider dir="rtl" :scroll-body="false"> |
| 63 | <App /> |
| 64 | </ConfigProvider> |
| 65 | ``` |
| 66 | |
| 67 | - 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) |
| 68 | |
| 69 | ```ts |
| 70 | const { forwardRef } = useForwardExpose() |
| 71 | // Usage: <div :ref="forwardRef">...</div> |
| 72 | ``` |
| 73 | |
| 74 | - 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) |
| 75 | |
| 76 | ```vue |
| 77 | <ComboboxViewport class="max-h-80 overflow-y-auto"> |
| 78 | <ComboboxVirtualizer :options="items" :estimate-size="25" v-slot="{ option }"> |
| 79 | <ComboboxItem :value="option">{{ option.label }}</ComboboxItem> |
| 80 | </ComboboxVirtualizer> |
| 81 | </ComboboxViewport> |
| 82 | ``` |
| 83 | |
| 84 | - Use `injectXContext` functions (e.g., `injectAccordionRootContext`) to access internal |
People who liked this also viewed
6 picksType
- hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, SkillsJul 2026
- request-refactor-planSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- analyze-projectRigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrSkillsMay 2026
- explore-codeRigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated braSkillsMay 2026
- ubiquitous-languageSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- scaffold-exercisesSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
