Material Design 3 準拠
動的配色（HCT）・ステートレイヤー・タイポスケールまで M3 の仕様に沿って実装。シード色からテーマを自動生成します。
Base UI をベースに Material Design 3 を実装した React コンポーネントライブラリ。vanilla-extract と Tailwind CSS v4 の両エンジンに drop-in 互換で対応し、動的配色・アクセシビリティに対応します。
実際に動くコンポーネントです。シード色やモードを切り替えると、動的配色がリアルタイムに反映されます。
動的配色（HCT）・ステートレイヤー・タイポスケールまで M3 の仕様に沿って実装。シード色からテーマを自動生成します。
キーボード操作・ARIA・フォーカス管理は Base UI が担保。axe による a11y テストを CI で常時実行しています。
vanilla-extract と Tailwind CSS v4 のどちらでも、同一 DOM・同一 data-* 属性を出力する drop-in 互換。
--md-sys-* CSS 変数がエンジン非依存の境界。トークンを 1 箇所で定義し、全エンジンの生成物へ反映します。
# Tailwind CSS v4 版（peer deps を含む）
bun add @AkimasaSugai/m3-baseui-react-tailwind @AkimasaSugai/m3-baseui-tokens \
react react-dom @base-ui/react tailwindcss
# vanilla-extract 版（peer deps を含む）
bun add @AkimasaSugai/m3-baseui-react-vanilla-extract @AkimasaSugai/m3-baseui-tokens \
react react-dom @base-ui/react \
@vanilla-extract/css @vanilla-extract/recipesimport { ThemeProvider, Button } from '@AkimasaSugai/m3-baseui-react-tailwind';
export function App() {
return (
<ThemeProvider seed="#6750A4" scheme="tonalSpot" mode="system">
<Button variant="filled">はじめる</Button>
</ThemeProvider>
);
}