Material Design 3 · Base UI · React

Base UI 上の
Material Design 3

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

はじめる GitHub

ライブデモ

実際に動くコンポーネントです。シード色やモードを切り替えると、動的配色がリアルタイムに反映されます。

配色シード:
コンポーネント
音量

特徴

Material Design 3 準拠

動的配色（HCT）・ステートレイヤー・タイポスケールまで M3 の仕様に沿って実装。シード色からテーマを自動生成します。

Base UI でアクセシブル

キーボード操作・ARIA・フォーカス管理は Base UI が担保。axe による a11y テストを CI で常時実行しています。

2 つのスタイリングエンジン

vanilla-extract と Tailwind CSS v4 のどちらでも、同一 DOM・同一 data-* 属性を出力する drop-in 互換。

トークン単一ソース

--md-sys-* CSS 変数がエンジン非依存の境界。トークンを 1 箇所で定義し、全エンジンの生成物へ反映します。

導入

インストール

# Tailwind CSS v4 版（peer deps を含む）
bun add @m3-baseui/react-tailwind @m3-baseui/tokens \
  react react-dom @base-ui/react tailwindcss

# vanilla-extract 版（peer deps を含む）
bun add @m3-baseui/react-vanilla-extract @m3-baseui/tokens \
  react react-dom @base-ui/react \
  @vanilla-extract/css @vanilla-extract/recipes

使い方

import { ThemeProvider, Button } from '@m3-baseui/react-tailwind';

export function App() {
  return (
    <ThemeProvider seed="#6750A4" scheme="tonalSpot" mode="system">
      <Button variant="filled">はじめる</Button>
    </ThemeProvider>
  );
}