reka-ui

Reka UI

スタイルなしで利用できる、アクセシブルな Vue 3 コンポーネントのプリミティブです。WAI-ARIA に準拠しています。以前は Radix Vue でした。

現在のバージョン： v2.11.0（2026年10月）

使用する場面

• ヘッドレス／スタイルなしのコンポーネントをゼロから構築する場合
• 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 UI をベースにしたスタイル付きの Nuxt コンポーネントについて： nuxt-ui スキルを使用してください

主な概念

概念	説明
asChild	ラッパーではなく子要素としてレンダリングし、プロパティや動作を統合します
Controlled/Uncontrolled	制御する場合は v-model を、制御しない場合は default* プロパティを使用します
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()] })
  ]
})

基本的なパターン

<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>

<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>

<DialogTrigger as-child>
  <button class="my-custom-button">Open</button>
</DialogTrigger>

最近の更新（v2.6.0-v2.10.5）

• 新しいコンポーネント：スワイプジェスチャー対応の Drawer（v2.10.0）、Autocomplete、TimeRangeField、Color コンポーネント（ColorArea など）、MonthPicker/YearPicker（v2.9.0）
• DropdownMenu：フィルターコンポーネント（v2.9.0）
• Checkbox/Switch：true/false のカスタム値（v2.9.0）
• Splitter：ピクセル単位のサイズ指定と制約（v2.9.0）
• Tooltip：グローバルなコンテンツ設定（v2.9.0）
• ConfigProvider：グローバルなテレポート先 teleportTo（v2.10.0）
• Dialog：unmountOnHide プロパティ（v2.10.0）
• HoverCard：enableTouch プロパティ（v2.10.0）
• Select：nullableValue プロパティ（v2.10.0）
• Popper：RTL/LTR 用の dir プロパティ（v2.10.0）
• DateField：stepSnapping（v2.10.0）
• TreeItem：disabled プロパティ、Tabs：--reka-tabs-indicator-thickness CSS 変数（v2.10.0）
• Rating：公開され、ドキュメントに追加（v2.10.0）
• 新しいコンポーネント：Rating（v2.8.0）
• ScrollArea：「glimpse」スクロールバーモードを追加（v2.8.0）
• PopperContent：hideShiftedArrow プロパティを追加（v2.8.0）
• TimeField：stepSnapping のサポートを追加（v2.8.0）
• 破壊的変更：日付コンポーネントで weekStartsOn がロケールに依存しなくなりました（v2.8.0）
• 仮想化：Listbox/Tree の estimateSize が関数を受け付けるようになりました（v2.7.0）
• コンポーザブル：useLocale、useDirection を公開（v2.6.0）
• Select：Content に disableOutsidePointerEvents プロパティ（v2.7.0）
• Toast：disableSwipe プロパティ（v2.6.0）

Resources

• Reka UI Docs
• GitHub
• Nuxt UI (styled Reka components)
• shadcn-vue (styled Reka components)

---

Token efficiency: ~350 tokens base, components.md index ~100 tokens, per-component ~50-150 tokens