重要前提
安装AI Skills的关键前提是:必须科学上网,且开启TUN模式,这一点至关重要,直接决定安装能否顺利完成,在此郑重提醒三遍:科学上网,科学上网,科学上网。查看完整安装教程 →
reka-ui-skilld by harlan-zw/vue-ecosystem-skills
npx skills add https://github.com/harlan-zw/vue-ecosystem-skills --skill reka-ui-skilld广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
filter-functionsearchTermdisplayValueComboboxInput重大变更: Checkbox, Toggle, MenuCheckboxItem — 绑定方式从 v-model:checked 或 v-model:pressed 改为标准的 v-model 来源
重大变更: DatePicker/Calendar — 从 v2.8.0 开始,weekStartsOn 现在与区域设置无关 来源
重大变更: Presence — forceMount 现在无论组件是否处于活动状态都会渲染组件;需要手动处理可见性(例如 :hidden)来源
重大变更: Pagination — itemsPerPage 属性现在是必需的,而不是拥有默认值 来源
新增: Rating 组件 — 在 v2.8.0 中添加,用于星级/评分输入交互 来源
新增: TimeField 组件 — 在 v2.0.0 中引入的用于本地化时间输入的新基础组件 来源
新增: useFilter() — 在 v2.0.0 中添加的具有区域设置感知的字符串过滤工具(startsWith, endsWith, contains)来源
新增: useLocale() / useDirection() — 用于访问当前配置上下文的工具钩子 来源
新增: ScrollArea 一瞥模式 — 为瞬态滚动条可见性添加了 ScrollAreaScrollbarGlimpse 来源
新增: Select disableOutsidePointerEvents — 添加到 SelectContent 的属性,用于控制与外部元素的交互 来源
新增: ConfigProvider — 用于区域设置、方向和 useId 设置的全局配置组件 来源
新增: NumberField 增强功能 — 添加了 focusOnChange、readonly 和 stepSnapping 属性 来源
其他变更: Popover/Dialog 编程式关闭 · Combobox openOnFocus 属性 · Slider thumbAlignment 属性 · Toast disableSwipe 属性 · ContextMenu pressOpenDelay 属性 · Presence 组件暴露 · calendar getWeekNumber 工具函数 · injectContext 暴露 · Collapsible/Accordion unmountOnHide 属性
使用 asChild 属性将 Reka 的功能组合到你自己的 Vue 组件或替代的 DOM 元素上,同时保持可访问性 来源
在构建包装器组件时使用 useForwardPropsEmits,以自动将所有属性和事件转发到底层的 Reka 基础组件 来源
const props = defineProps<AccordionRootProps>() const emits = defineEmits<AccordionRootEmits>() const forwarded = useForwardPropsEmits(props, emits) // 用法: <AccordionRoot v-bind="forwarded">
使用 ConfigProvider 包装你的应用程序,以管理全局阅读方向(RTL)并防止在滚动锁定期间发生布局偏移 来源
在具有多个根节点(片段)的组件中应用 useForwardExpose,以确保模板引用正确返回目标 DOM 元素 来源
const { forwardRef } = useForwardExpose() // 用法: <div :ref="forwardRef">...</div>
对于大型数据集,实现 ComboboxVirtualizer 或 ListboxVirtualizer 以提高性能,确保父容器具有固定高度 来源
使用 injectXContext 函数(例如 injectAccordionRootContext)来访问内部基础组件状态,以用于高级自定义子组件 来源
通过定位 data-state 属性(例如 open、closed、active)来设置组件状态样式,而不是手动切换类 来源
/* 设置打开状态的推荐方式 */ .AccordionItem[data-state="open"] { border-bottom-width: 2px; }
在 Vue 作用域样式内为传送到 body 的组件(Dialog、Popover、Tooltip)设置样式时,使用 :deep() 选择器以定位到附加到 body 的元素 来源
在使用 JavaScript 动画库或 Vue <Transition> 时,在内容部分启用 force-mount,以便将卸载控制权委托给该库 来源
对于稳定的 SSR 标识符,优先使用 Vue 3.5 原生的 useId() 而不是 Reka UI 的工具函数,因为该库工具函数在较新的 Vue 版本中已被弃用 来源
每周安装量
60
代码仓库
GitHub 星标数
150
首次出现
2026年2月19日
安全审计
已安装于
claude-code50
github-copilot49
codex47
opencode47
kimi-cli46
gemini-cli46
reka-ui@2.9.3Tags: latest: 2.9.3
References: Docs
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
BREAKING: Combobox refactor — filter-function prop removed; searchTerm and displayValue props moved from Root to ComboboxInput source
BREAKING: Checkbox, Toggle, MenuCheckboxItem — bindings changed from v-model:checked or v-model:pressed to standard v-model source
BREAKING: DatePicker/Calendar — weekStartsOn is now locale-independent as of v2.8.0 source
BREAKING: Presence — forceMount now renders components regardless of active state; manual visibility handling (e.g. :hidden) is required source
BREAKING: Pagination — itemsPerPage prop is now required rather than having a default value source
NEW: Rating component — added for star/rating input interactions in v2.8.0 source
NEW: TimeField component — new primitive for localized time inputs introduced in v2.0.0 source
NEW: useFilter() — locale-aware string filtering utility (startsWith, endsWith, contains) added in v2.0.0 source
NEW: useLocale() / useDirection() — utility hooks for accessing the current configuration context source
NEW: ScrollArea glimpse mode — added ScrollAreaScrollbarGlimpse for transient scrollbar visibility source
NEW: Select disableOutsidePointerEvents — prop added to SelectContent to control interaction with outside elements source
NEW: ConfigProvider — global configuration component for locale, direction, and useId settings source
NEW: NumberField enhancements — added focusOnChange, readonly, and stepSnapping props source
Also changed: Popover/Dialog programmatic close · Combobox openOnFocus props · Slider thumbAlignment prop · Toast disableSwipe prop · ContextMenu pressOpenDelay prop · Presence component exposed · calendar utility · exposed · prop
Use the asChild prop to compose Reka's functionality onto your own Vue components or alternative DOM elements while maintaining accessibility source
Utilize useForwardPropsEmits when building wrapper components to automatically forward all props and emits to the underlying Reka primitive source
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
Apply useForwardExpose in components with multiple root nodes (fragments) to ensure that template refs correctly return the target DOM element
Weekly Installs
60
Repository
GitHub Stars
150
First Seen
Feb 19, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykWarn
Installed on
claude-code50
github-copilot49
codex47
opencode47
kimi-cli46
gemini-cli46
Nuxt 4 模式指南:SSR、混合渲染、路由规则与数据获取最佳实践
1,100 周安装
getWeekNumberinjectContextCollapsible/AccordionunmountOnHideconst { 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
Use injectXContext functions (e.g., injectAccordionRootContext) to access internal primitive state for advanced custom child components source
Style component states by targeting data-state attributes (e.g., open, closed, active) instead of manually toggling classes source
/* 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
Enable force-mount on content parts when using JavaScript animation libraries or Vue <Transition> to delegate unmounting control to the library source
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