mui/base-ui

⭐ 3,921 🍴 159 TypeScript📄 MIT License GitHubで見る →

主な特徴

  • 完全にカスタマイズ可能なスタイルなしコンポーネント
  • 包括的なアクセシビリティサポート（キーボード操作、スクリーンリーダー対応）
  • 最新のReact 19対応とTypeScript完全サポート

リポジトリ解析: mui/base-ui

基本情報

  • リポジトリ名: mui/base-ui
  • 主要言語: TypeScript
  • スター数: 3,921
  • フォーク数: 159
  • 最終更新: 最近（アクティブ開発中）
  • ライセンス: MIT License
  • トピックス: UIコンポーネント、Reactライブラリ、アクセシビリティ

概要

一言で言うと

アクセシブルなWebアプリとデザインシステム構築のための、スタイルなしReactコンポーネントライブラリ

詳細説明

Base UIは、Radix、Floating UI、Material UIの開発チームによる次世代のReactコンポーネントライブラリです。このライブラリの最大の特徴は「unstyled（スタイルなし）」であることで、開発者はCSSとアクセシビリティ機能を完全にコントロールできます。各コンポーネントは、WAI-ARIAガイドラインに準拠した高度なアクセシビリティ機能を提供しながら、ビジュアルスタイルは一切持たないため、どんなデザインシステムにも適応可能です。

主な特徴

  • 完全にカスタマイズ可能なスタイルなしコンポーネント
  • 包括的なアクセシビリティサポート（キーボード操作、スクリーンリーダー対応）
  • 最新のReact 19対応とTypeScript完全サポート

使用方法

インストール

前提条件

  • Node.js 18以上
  • React 19.1.0以上
  • TypeScriptプロジェクト（推奨）

インストール手順

# 方法1: npm経由
npm install @base-ui-components/react

# 方法2: pnpm経由（推奨）
pnpm add @base-ui-components/react

# 方法3: yarn経由
yarn add @base-ui-components/react

基本的な使い方

Hello World相当の例

// 基本的なボタンコンポーネント
import * as React from 'react';
import { Button } from '@base-ui-components/react/button';

export default function App() {
  return (
    <Button onClick={() => console.log('Clicked!')}>
      Click me
    </Button>
  );
}

実践的な使用例

// チェックボックスとフォームの例
import * as React from 'react';
import { Checkbox } from '@base-ui-components/react/checkbox';
import { Field } from '@base-ui-components/react/field';
import { Form } from '@base-ui-components/react/form';

export default function RegistrationForm() {
  const [agreed, setAgreed] = React.useState(false);

  return (
    <Form>
      <Field.Root>
        <Field.Label>利用規約への同意</Field.Label>
        <Checkbox.Root 
          checked={agreed}
          onCheckedChange={setAgreed}
        >
          <Checkbox.Indicator>
            {agreed && '✓'}
          </Checkbox.Indicator>
        </Checkbox.Root>
        <Field.Description>
          利用規約に同意する必要があります
        </Field.Description>
      </Field.Root>
    </Form>
  );
}

高度な使い方

// カスタムレンダリングとアクセシビリティ
import { Toggle } from '@base-ui-components/react/toggle';
import { ToggleGroup } from '@base-ui-components/react/toggle-group';

function TextAlignmentToggle() {
  const [value, setValue] = React.useState('left');

  return (
    <ToggleGroup.Root value={value} onValueChange={setValue}>
      <Toggle value="left" aria-label="左揃え">
        <AlignLeftIcon />
      </Toggle>
      <Toggle value="center" aria-label="中央揃え">
        <AlignCenterIcon />
      </Toggle>
      <Toggle value="right" aria-label="右揃え">
        <AlignRightIcon />
      </Toggle>
    </ToggleGroup.Root>
  );
}

ドキュメント・リソース

公式ドキュメント

  • README.md: プロジェクト概要とクイックスタート
  • docs/: Next.jsベースのドキュメントサイトソース
  • Wiki/サイト: https://base-ui.com（公式ドキュメント）

サンプル・デモ

  • test/floating-ui-tests/: 実践的なUI実装例
    • Menu.tsx: メニューコンポーネントの実装
    • Popover.tsx: ポップオーバーの実装
    • Navigation.tsx: ナビゲーションの実装

チュートリアル・ガイド

技術的詳細

アーキテクチャ

全体構造

モノレポ構造で管理される、高度にモジュール化されたコンポーネントライブラリ：

  • react/: メインコンポーネントパッケージ
  • docs/: ドキュメントサイト
  • eslint-plugin-material-ui/: カスタムESLintルール

ディレクトリ構成

project-root/
├── packages/             # パッケージ群
│   ├── react/           # メインReactコンポーネント
│   │   ├── src/         # ソースコード
│   │   │   ├── accordion/    # アコーディオンコンポーネント
│   │   │   ├── checkbox/     # チェックボックスコンポーネント
│   │   │   ├── dialog/       # ダイアログコンポーネント
│   │   │   └── ...          # その他のコンポーネント
│   │   └── test/        # テストユーティリティ
│   └── eslint-plugin/   # ESLintプラグイン
├── docs/                # ドキュメントサイト
├── test/                # 統合テスト
└── scripts/             # ビルド・リリーススクリプト

主要コンポーネント

  • useRender: カスタムレンダリングロジックの中核

    • 場所: src/use-render/useRender.ts
    • 依存: React hooks
    • インターフェース: renderElement, state管理

  • CompositeItem: 複合UIコンポーネントの基礎

    • 場所: src/composite/item/CompositeItem.tsx
    • 依存: useCompositeItem hook
    • インターフェース: キーボードナビゲーション、フォーカス管理

  • FloatingUI統合: ポップアップ・ツールチップの位置計算

    • 場所: src/floating-ui-react/
    • 依存: @floating-ui/react
    • インターフェース: useFloating, useInteractions

技術スタック

コア技術

  • 言語: TypeScript 5.8.3（厳格な型チェック）
  • フレームワーク: React 19.1.0（最新機能対応）
  • 主要ライブラリ:
    • @floating-ui/react: ポップアップ位置計算
    • @emotion/react: CSS-in-JS（ドキュメントサイト用）
    • @mdx-js/react: MDXドキュメント

開発・運用ツール

  • ビルドツール:
    • Vite（開発・テスト）
    • Next.js（ドキュメント）
    • Lerna（モノレポ管理）
  • テスト:
    • Vitest（ユニットテスト）
    • Playwright（E2Eテスト）
    • カバレッジ目標: 高い
  • CI/CD: GitHub Actions（推測）
  • デプロイ: npm/pnpmレジストリ

設計パターン・手法

  • コンポジション優先の設計（Root/Item/Indicatorパターン）
  • Render Props/カスタムレンダリング
  • Context APIによる状態管理
  • アクセシビリティファースト設計

データフロー・処理フロー

  1. ユーザーインタラクション → イベントハンドラー
  2. 内部状態更新 → Context Provider
  3. 子コンポーネントへの伝播
  4. ARIA属性の自動更新
  5. カスタムレンダリング関数の実行

API・インターフェース

公開API

Checkbox API

// Checkbox.Root
interface CheckboxRootProps {
  checked?: boolean;
  defaultChecked?: boolean;
  onCheckedChange?: (checked: boolean, event: Event) => void;
  disabled?: boolean;
  required?: boolean;
  render?: RenderProp<HTMLElement>;
}

// Checkbox.Indicator
interface CheckboxIndicatorProps {
  render?: RenderProp<HTMLElement>;
  children?: React.ReactNode;
}

設定・カスタマイズ

カスタムレンダリング

// renderプロップによる完全なカスタマイズ
<Checkbox.Root
  render={(props) => (
    <CustomCheckbox {...props} className="my-checkbox" />
  )}
/>

拡張・プラグイン開発

各コンポーネントは合成可能で、独自のコンポーネントライブラリ構築が可能

パフォーマンス・スケーラビリティ

パフォーマンス特性

  • ツリーシェイキング対応（未使用コンポーネントの除外）
  • メモ化による再レンダリング最適化
  • イベント委譲による効率的なイベント処理

スケーラビリティ

  • モジュラー設計により必要なコンポーネントのみインポート可能
  • 大規模アプリケーションでの使用実績

制限事項

  • スタイルなしのため、視覚的デザインは完全に実装者の責任
  • 一部のコンポーネントはまだベータ版
  • React 19以降が必須

評価・所感

技術的評価

強み

  • 最高レベルのアクセシビリティサポート
  • 完全な型安全性とTypeScriptサポート
  • 柔軟なカスタマイズ性とデザインシステムへの適応性

改善の余地

  • 初期学習曲線が高い（スタイルなしのため）
  • ドキュメントの一部がまだ充実していない

向いている用途

  • 独自のデザインシステムを持つ大規模プロジェクト
  • アクセシビリティが重要な公共・企業向けアプリケーション
  • 既存のCSSフレームワークと組み合わせたい場合

向いていない用途

  • すぐに使える美しいUIが必要なプロトタイプ
  • CSSの知識が限定的なチーム
  • 小規模な個人プロジェクト

総評

Base UIは、Material UI、Radix、Floating UIの開発チームの経験を結集した、次世代のReactコンポーネントライブラリです。「スタイルなし」というアプローチは一見ハードルが高く感じられますが、これにより完全な自由度と最高レベルのアクセシビリティを実現しています。大規模プロジェクトや独自のデザインシステムを持つチームにとって、理想的な選択肢となるでしょう。