ArkUI
このオープンソースのUIソリューションでは、カスタマイズ可能なコンポーネントを使って高度なデザインシステムを作成できます。さまざまなビジュアルスタイルやアクセシビリティ基準に合わせて調整できます。
マークアップとCSSを完全に制御しながら、優れたアクセシビリティの標準設定とARIA準拠の動作を提供する、ヘッドレスでスタイルなしのReactコンポーネントライブラリです。
組み合わせ可能なプリミティブとして設計され、スロットベースのAPIを備えています。コンポーネントはツリーシェイキングに対応し、TypeScriptで利用でき、Tailwind、CSS Modules、CSS-in-JS、プレーンなCSSなど、あらゆるスタイリング手法で使えます。
Accordion、Alert Dialog、Avatar、CheckboxとCheckbox Group、Collapsible、Context Menu、Dialog、FieldとFieldset、Form、Input、MenuとMenubar、Meter、Navigation Menu、Number Field、Popover、Progress、Radio、Scroll Area、Select、Separator、Slider、Switch、Tabs、Toast、ToggleとToggle Group、Toolbar、Tooltipなど、幅広いUIパターンとプリミティブをカバーしています。Direction ProviderやuseRenderなどのユーティリティも含まれます。
ポップアップコンポーネントはReact Portalsを使用します。z-indexの競合を避け、オーバーレイが常にページコンテンツの上に表示されるよう、独立したスタッキングコンテキストを作成することを推奨しています。ドキュメントには、コンポーネントの組み立て方やパーツの組み合わせ方、さまざまなスタイリングシステムとの連携例が掲載されています。
MITライセンスのオープンソースで、継続的にリリースされ、ロードマップやアクセシビリティを重視したガイダンスも提供されています。ドキュメントの各ページはMarkdown形式でも閲覧でき、コードの調査や連携を簡単にするLLM向けのリソースも含まれています。
機能
- ヘッドレスでスタイルなしのReactコンポーネント
- デフォルトでアクセシブル、ARIA準拠の動作
- 組み合わせ可能なスロットベースのAPI
- ツリーシェイキングに対応したESMビルド
- TypeScript型定義
- Tailwind、CSS Modules、CSS-in-JS、プレーンなCSSに対応
- ポップアップやオーバーレイにReact Portalsを使用
- z-indexの問題を避けるスタッキングコンテキスト分離のガイダンス
- 制御コンポーネントと非制御コンポーネントの利用パターン
- 幅広いコンポーネントを網羅（メニュー、ダイアログ、ポップオーバー、タブ、セレクト、スライダーなど）
- SSRに適し、特定のフレームワークに依存しない
- MITライセンスのオープンソース
- LLM向けヘルパーを含むMarkdown形式のドキュメント
関連項目
MaterialUI
Reactでユーザーインターフェースを構築するための充実したツールセットを提供し、柔軟性とデザイン基準への準拠を重視しています。
Radix Vue
デザインシステムの構築に使える、カスタマイズ可能でアクセシブルなUIコンポーネントを提供する非公式のVue移植版です。
PrimeVue
Vue.jsアプリケーションをスムーズかつ効率的に構築するための、豊富なオープンソースUIコンポーネント集です。
Radix Primitives
高品質なウェブアプリやデザインシステムのための、スタイルなしでアクセシブルなオープンソースのReactプリミティブです。
Vaul
Reactアプリケーションにスムーズに組み込める、スタイルのないドロワーコンポーネントです。モバイル端末でのユーザー操作を向上させます。
ChakraUI
使いやすく高度にカスタマイズ可能な基本コンポーネントを豊富に備え、アクセシブルなウェブアプリケーションをすばやく効率的に作成できます。
cmdk
React向けの包括的なコマンドメニューソリューションで、ユーザー体験と開発者の柔軟性の両方を重視しています。