Radix Primitivesとは？Accessible React UI Primitives

ページ内ナビ

概要

Radix Primitivesはaccessibleなdesign systemやweb appを構築するためのlow-level React UI component libraryです。Dialog、Select、Popover、Tabs等のinteraction behaviorとcomposition primitiveを提供し、visual stylingはapplication側で自由に設計できます。個別packageまたはradix-ui packageから利用できます。

特徴と向いている用途

公式資料に基づく紹介・実機未検証 · 内容確認日：2026-10-05

主な特徴

Dialog・Select・Popover・Tabs等のUI primitiveを組み合わせる

monorepoはDialog、DropdownMenu、Select、Tabs、Tooltip等のReact component packageを提供し、必要なprimitiveだけを選んで導入できます。

出典：[1][4]

accessibilityとinteraction behaviorをdesign systemの土台にする

READMEはaccessibility、customization、developer experienceをfocusとして掲げています。application固有のvisual languageを保ちながら、低レベルcomponentをdesign systemのbase layerとして使えます。

出典：[1]

個別packageとまとめpackageのどちらでも利用できる

radix-ui packageはAccordion、Dialog、Select、Slot、Tooltip等をnamespace exportし、個別の@radix-ui/react-* packageを直接選ぶ構成とまとめて使う構成の両方を取れます。

出典：[2][4]

向いている用途

独自styleを維持しながらaccessibleなinteraction primitiveを再利用したいdesign systemに向く

完成済みthemeよりcompositionとbehaviorの再利用を優先し、product固有のCSSやdesign tokenを重ねたいfrontend teamに適します。

出典：[1]

導入前の確認

monorepo内packageは同一versionではなくpackageごとにversion管理される

確認時点でmeta package radix-uiは1.6.7、@radix-ui/react-dialogは1.1.23です。repository全体を単一versionとして扱わず、導入するpackageごとにpinとchangelog確認を行ってください。

出典：[2][3]

SSRだけではkeyboard・focus・portal等のbrowser interaction検証を代替できない

package surfaceやserver renderingの確認だけでは実際のfocus management、keyboard操作、overlay/portal配置、application CSSとの組み合わせは確認できません。target browserでaccessibility testを追加してください。

出典：[1][3]

参考にした公式資料

[1]Radix Primitives README at f7ecd5a(2026-10-05)
[2]radix-ui 1.6.7 package metadata(2026-10-05)
[3]@radix-ui/react-dialog 1.1.23 package metadata(2026-10-05)
[4]radix-ui package exports(2026-10-05)
[5]Radix Primitives MIT license(2026-10-05)

編集部からの補足

見た目を完成品として提供するUI kitではなく、behaviorとaccessibilityを土台にdesign systemを組み立てるlibraryです。keyboard/focus/portalを含む実UIはbrowserで別途検証してください。

3ステップで試す

1
radix-ui 1.6.7を固定して導入する
一時npm projectへ確認済みのmeta packageとReact peer dependencyを固定して導入します。
demo=$(mktemp -d "${TMPDIR:-/tmp}/radix-primitives.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact radix-ui@1.6.7 react@19.2.8 react-dom@19.2.8
2
Dialog namespaceのexportを確認する
browserを起動せず、meta packageからDialogの主要primitiveがexportされることを確認するscriptを作ります。
printf '%s\n' "import { Dialog } from 'radix-ui'" "console.log(['Root','Trigger','Content'].every((key)=>key in Dialog))" > demo.mjs
3
package surfaceを検証する
Dialog.Root、Dialog.Trigger、Dialog.Contentが利用可能であることを確認します。focusやkeyboard操作はbrowser testで別途確認してください。
test "$(node demo.mjs)" = 'true'

公式READMEで確認

成長

成長の推移 · 直近30日

19,360 Stars

推移データを蓄積中です。

開発アクティビティ

直近90日・週次

Commit（直近30日）: 0
Open PR: 158

開発アクティビティを蓄積中です。

Built with

カテゴリとタグ

GitHubデータ

GitHubのデータGitHubの詳細データを見る

GitHubで見る

GitHub Topics

ui
ui-components
ui-kit
design-systems
accessibility
react
component-library
radix-ui
colors

Stars: 19,360
Forks: 1,256
Watchers: 90
Open Issues: 207
Contributors: 97
所有者種別: Organization
主要言語: TypeScript
ライセンス: MIT
リポジトリ最終更新: 2026/08/08