Reka UI

スタイルなし、アクセシブルな Vue 3 コンポーネントプリミティブ。WAI-ARIA 準拠。以前は Radix Vue として知られていました。

現在のバージョン: v2.8.0（2026年1月）

使用する場合

• ゼロから headless/unstyled コンポーネントを構築する場合
• WAI-ARIA 準拠のコンポーネントが必要な場合
• Nuxt UI、shadcn-vue、または Reka ベースの他のライブラリを使用している場合
• アクセシブルなフォーム、ダイアログ、メニュー、ポップオーバーを実装する場合

Vue パターンについては: vue スキルを使用してください

利用可能なガイダンス

ファイル	トピック
references/components.md	カテゴリ別コンポーネントインデックス（Form、Date、Overlay、Menu、Data など）
components/*.md	コンポーネント別の詳細情報（dialog.md、select.md など）

ガイド (reka-ui.com を参照)：スタイリング、アニメーション、コンポジション、SSR、Namespaced、日付、i18n、制御状態、Inject Context、仮想化、マイグレーション

ファイルの読み込み

タスクに基づいて以下の参考ファイルの読み込みを検討してください:

• references/components.md - コンポーネントインデックスをカテゴリ別に閲覧したり、特定のコンポーネントを検索する場合

一度にすべてのファイルを読み込まないでください。 現在のタスクに関連するファイルのみを読み込んでください。

Reka UI 上に構築されたスタイル付き Nuxt コンポーネントについては: nuxt-ui スキルを使用してください

主要な概念

概念	説明
asChild	ラッパーの代わりに子要素としてレンダリング、props/動作をマージ
Controlled/Uncontrolled	制御状態は v-model を使用、非制御状態は default* props を使用
Parts	コンポーネントを Root、Trigger、Content、Portal などに分割
forceMount	アニメーションライブラリ用に DOM に要素を保持
Virtualization	仮想スクロールで大規模リスト（Combobox、Listbox、Tree）を最適化
Context Injection	子コンポーネントからコンポーネントコンテキストにアクセス

インストール

// nuxt.config.ts (auto-imports all components)
export default defineNuxtConfig({
  modules: ['reka-ui/nuxt']
})

import { RekaResolver } from 'reka-ui/resolver'
// vite.config.ts (with auto-import resolver)
import Components from 'unplugin-vue-components/vite'

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

基本パターン

<!-- Dialog with controlled state -->
<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>Open</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>Title</DialogTitle>
        <DialogDescription>Description</DialogDescription>
        <DialogClose>Close</DialogClose>
      </DialogContent>
    </DialogPortal>
  </DialogRoot>
</template>

<!-- Select with uncontrolled default -->
<SelectRoot default-value="apple">
  <SelectTrigger>
    <SelectValue placeholder="Pick fruit" />
  </SelectTrigger>
  <SelectPortal>
    <SelectContent>
      <SelectViewport>
        <SelectItem value="apple"><SelectItemText>Apple</SelectItemText></SelectItem>
        <SelectItem value="banana"><SelectItemText>Banana</SelectItemText></SelectItem>
      </SelectViewport>
    </SelectContent>
  </SelectPortal>
</SelectRoot>

<!-- asChild for custom trigger element -->
<DialogTrigger as-child>
  <button class="my-custom-button">Open</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）
• Virtualization: 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 Docs
• GitHub
• Nuxt UI（スタイル付き Reka コンポーネント）
• shadcn-vue（スタイル付き Reka コンポーネント）

---

トークン効率: ベース ~350 トークン、components.md インデックス ~100 トークン、コンポーネント別 ~50-150 トークン