概要

はじめに

高品質でアクセシビリティの高いデザインシステムとWebアプリケーションを構築するためのオープンソースUIコンポーネントライブラリです。

Radix Primitivesは、アクセシビリティ、カスタマイズ性、開発者エクスペリエンスに重点を置いた低レベルのUIコンポーネントライブラリです。これらのコンポーネントをデザインシステムの基盤レイヤーとして使用したり、段階的に導入したりすることができます。

ビジョン

アコーディオン、チェックボックス、コンボボックス、ダイアログ、ドロップダウン、セレクト、スライダー、ツールチップなど、一般的なUIパターンに対する定義は、ほとんどの人が共通しています。これらのUIパターンは、WAI-ARIAによって文書化されておりコミュニティにも広く理解されています。

しかし、Webプラットフォームによって提供される実装は不十分です。存在しないか、機能が不足しているか、十分にカスタマイズできないかのいずれかです。

そのため、開発者はカスタムコンポーネントを構築せざるを得なくなり、これは非常に困難な作業です。その結果、Web上のほとんどのコンポーネントはアクセシビリティが低く、パフォーマンスが悪く、重要な機能が不足しています。

私たちの目標は、コミュニティがアクセシビリティの高いデザインシステムを構築するために使用できる、十分に資金提供されたオープンソースのコンポーネントライブラリを作成することです。

主な機能

アクセシビリティ

コンポーネントは可能な限りWAI-ARIAデザインパターンに準拠しています。アクセシビリティに関する多くの実装上の難しい詳細(aria属性とrole属性、フォーカス管理、キーボードナビゲーションなど)を処理します。詳細は、アクセシビリティの概要をご覧ください。

スタイル未適用

コンポーネントはスタイルなしで提供されるため、スタイリングを完全に制御できます。コンポーネントは、あらゆるスタイリングソリューション(ネイティブCSS、CSSプリプロセッサ、CSS-in-JSライブラリ)を使用してスタイル設定できます。詳細は、スタイリングガイドをご覧ください。

オープンソース

Radix Primitivesは、お客様のニーズに合わせてカスタマイズされるように設計されています。オープンなコンポーネントアーキテクチャにより、各コンポーネント部分に詳細なアクセスを提供し、独自のイベントリスナー、プロップ、またはrefを追加できます。

非制御コンポーネント

該当する場合は、コンポーネントはデフォルトで非制御ですが、必要に応じて制御することもできます。すべての動作の配線は内部で処理されるため、ローカル状態を作成する必要なく、スムーズに作業を開始できます。

開発者体験

私たちの主な目標の1つは、可能な限り最高の開発者体験を提供することです。Radix Primitivesは、完全に型付けされたAPIを提供します。すべてのコンポーネントは同様のAPIを共有し、一貫性があり予測可能なエクスペリエンスを作成します。また、asChildプロップを実装しており、ユーザーはレンダリングされた要素を完全に制御できます。

段階的な導入

各プリミティブは個別にインストールできるため、段階的に導入できます。

npm install @radix-ui/react-dialog
npm install @radix-ui/react-dropdown-menu
npm install @radix-ui/react-tooltip

プリミティブは個別にバージョン管理されているため、段階的な導入がさらに容易になります。

コミュニティ

Discord

Radixコミュニティに参加し、質問したり、ヒントを共有したりするには、Discordに参加してください。

Discordに参加する

Twitter

新しいプリミティブのアップデート、お知らせ、ブログ投稿、および一般的なRadixのヒントを受け取るには、Twitterでフォローしてください。

TwitterでRadixをフォローする

GitHub

問題の報告、機能のリクエスト、貢献を行うには、GitHubをご覧ください。

GitHubリポジトリ 行動規範