reka-ui

Reka UI

無樣式、可存取的 Vue 3 元件基礎套件。符合 WAI-ARIA 規範。前身為 Radix Vue。

目前版本： v2.8.0（2026 年 1 月）

使用時機

• 從頭建構無樣式/無外觀元件
• 需要符合 WAI-ARIA 規範的元件
• 使用 Nuxt UI、shadcn-vue 或其他基於 Reka 的函式庫
• 實作可存取的表單、對話框、選單、彈出視窗

Vue 模式： 使用 vue 技能

可用指引

檔案	主題
references/components.md	依分類的元件索引（表單、日期、覆蓋層、選單、資料等）
components/*.md	各元件詳細說明（dialog.md、select.md 等）

指南（參見 reka-ui.com）：樣式、動畫、組合、SSR、命名空間、日期、i18n、受控狀態、注入上下文、虛擬化、遷移

載入檔案

根據您的任務考慮載入以下參考檔案：

• [ ] references/components.md - 若需瀏覽依分類的元件索引或搜尋特定元件

請勿一次載入所有檔案。 僅載入與當前任務相關的內容。

若使用基於 Reka 建構的樣式化 Nuxt 元件： 請使用 nuxt-ui 技能

關鍵概念

概念	說明
asChild	以子元素取代外層包裹，合併 props 與行為
受控/非受控	使用 v-model 控制受控狀態，default* props 控制非受控狀態
零件（Parts）	元件拆分為 Root、Trigger、Content、Portal 等部分
forceMount	保留元素在 DOM 中以供動畫函式庫使用
虛擬化	透過虛擬滾動最佳化大型列表（Combobox、Listbox、Tree）
上下文注入	從子元件存取元件上下文

安裝

// nuxt.config.ts（自動匯入所有元件）
export default defineNuxtConfig({
  modules: ['reka-ui/nuxt']
})

import { RekaResolver } from 'reka-ui/resolver'
// vite.config.ts（搭配自動匯入解析器）
import Components from 'unplugin-vue-components/vite'

export default defineConfig({
  plugins: [
    vue(),
    Components({ resolvers: [RekaResolver()] })
  ]
})

基本模式

<!-- 對話框（受控狀態） -->
<script setup>
import { DialogRoot, DialogTrigger, DialogPortal, DialogOverlay, DialogContent, DialogTitle, DialogDescription, DialogClose } from 'reka-ui'
const open = ref(false)
</script>

<template>
  <DialogRoot v-model:open="open">
    <DialogTrigger>開啟</DialogTrigger>
    <DialogPortal>
      <DialogOverlay class="fixed inset-0 bg-black/50" />
      <DialogContent class="fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-white p-6 rounded">
        <DialogTitle>標題</DialogTitle>
        <DialogDescription>描述</DialogDescription>
        <DialogClose>關閉</DialogClose>
      </DialogContent>
    </DialogPortal>
  </DialogRoot>
</template>

<!-- 選擇器（非受控預設值） -->
<SelectRoot default-value="apple">
  <SelectTrigger>
    <SelectValue placeholder="選擇水果" />
  </SelectTrigger>
  <SelectPortal>
    <SelectContent>
      <SelectViewport>
        <SelectItem value="apple"><SelectItemText>蘋果</SelectItemText></SelectItem>
        <SelectItem value="banana"><SelectItemText>香蕉</SelectItemText></SelectItem>
      </SelectViewport>
    </SelectContent>
  </SelectPortal>
</SelectRoot>

<!-- 使用 asChild 自訂觸發元素 -->
<DialogTrigger as-child>
  <button class="my-custom-button">開啟</button>
</DialogTrigger>

近期更新（v2.6.0 - v2.8.0）

• 新元件：Rating（v2.8.0）
• ScrollArea：新增「glimpse」捲軸模式（v2.8.0）
• PopperContent：新增 hideShiftedArrow prop（v2.8.0）
• TimeField：新增 stepSnapping 支援（v2.8.0）
• 重大變更：日期元件的 weekStartsOn 現在與地區設定無關（v2.8.0）
• 虛擬化：estimateSize 可接受函式用於 Listbox/Tree（v2.7.0）
• Composables：公開 useLocale、useDirection（v2.6.0）
• Select：Content 新增 disableOutsidePointerEvents prop（v2.7.0）
• Toast：新增 disableSwipe prop（v2.6.0）

資源

• Reka UI 文件
• GitHub
• Nuxt UI（樣式化的 Reka 元件）
• shadcn-vue（樣式化的 Reka 元件）

---

Token 效率：基礎約 350 tokens，components.md 索引約 100 tokens，各元件約 50-150 tokens