ドキュメント

m3-baseui は Base UI をベースに Material Design 3 を実装した React コンポーネントライブラリです。 vanilla-extract と Tailwind CSS v4 の 2 エンジンに drop-in 互換で対応し、動的配色とアクセシビリティを備えています。

クイックスタート

目的に応じて次のページから読み進めてください。

導入パッケージのインストールと CSS 配線テーマ・動的配色 ThemeProvider と seed / scheme スタイリングエンジン Tailwind v4 と vanilla-extract の選択コンポーネント一覧各 API と実装例

アーキテクチャ

4 レイヤー構成です。上から順にデータと依存が流れ、Layer 2 の --md-sys-* CSS 変数がエンジン非依存の境界線になります。React ロジックは @m3-baseui/core に一元化されています。

Layer 2（Token）を境に、上の Behavior は共通、下の Styling がエンジン別に切り替わります。

Behavior

Base UI が a11y / フォーカス / キーボード / data-* 状態を担当

Token

@m3-baseui/tokens が単一ソース → --md-sys-* CSS 変数を生成（エンジン非依存の境界線）

Styling

Tailwind v4 または vanilla-extract のクラス解決器。出力 DOM は同一

Theme

ThemeProvider が動的配色（HCT）でスキームを解決

drop-in 互換

2 つのエンジンはコンポーネント API・出力 DOM・data-* 属性がすべて同一です。 import パスを差し替えるだけで入れ替えられます。