オープンソース · Web向けに設計

GoogleのMaterial 3 Expressive。
Reactのために。

Googleの新しい大胆なMaterialデザインを、Reactコンポーネントと表現豊かなモーション、製品に合わせられるテーマとともにWebで利用できます。

コンポーネントを試す始める

React 18・19
TypeScript
MITライセンス
ランタイム依存関係0件

Googleのデザインシステムを独立して実装しています。

実際のコンポーネントを試すインタラクティブデモ

操作に反応するボタン

長押ししてシェイプの変化を確認してください。

表現豊かなローディング表示

一般的なスピナーの代わりにMaterialのシェイプを使います。

インジケーターをアニメーション

固定値とアニメーションを切り替えます。

LoadingIndicatorのドキュメントを見る →

このデモのすべてにパッケージのコンポーネントを使用しています。

Expressiveの特徴

GoogleによるMaterial Designの次の進化をご紹介します。

Material 3 Expressiveは、シェイプ、色、サイズ、モーションを使って適切なアクションに注目を集めます。使い慣れたパターンを保ちながら、インターフェースに個性を加えます。

Googleの調査を見る

46件の調査

18,000+人の参加者（世界各地）

Googleは数百種類のデザインを検証し、インターフェースの使いやすさ、独自性、魅力を高める要素を調べました。

ブランドに合わせて設定

色を選ぶと、インターフェース全体に反映されます。

プリセットから選ぶか、独自のソースカラーを使えます。同じコンポーネントをライトモードとダークモードで試せます。

ソースカラー

色を選ぶとページ全体が変化します。コンポーネントをライトモードとダークモードで比較することもできます。

ライトダークシステム

チェックボックススイッチ

プロジェクト名ネイティブ入力とネイティブ検証

1つのテーマですべてのコンポーネントを制御

ボタン、入力欄、カードは同じ色、シェイプ、モーションのトークンを使います。型付きテーマAPIから変更できます。

デモで使うトーンパレットを表示

プライマリ

セカンダリ

ターシャリ

ニュートラルバリアント

このサイトはソースカラーからパレットを生成し、型付きテーマAPIを通してライブラリに渡します。ライブラリは参照先とカラーロールのコントラストを検証します。

実際のReactアプリ向け

Web上で適切に動作するMaterialデザイン。

ボタンはネイティブのボタン要素です。チェックボックスはフォームと連携します。キーボード操作、RTL、モーション低減、強制カラーモードに対応し、その仕様を記載しています。

準拠済みコンポーネント

ボタン、入力、ナビゲーション、オーバーレイなどを使って構築できます。各コンポーネントにはライブ例と準拠記録があります。

すべてのコンポーネントを見る →

追加のランタイム依存関係

ピア依存関係はReactとReact DOMのみです。スタイルはコンパイル済みCSSで提供し、Tailwindの設定や実行時のスタイル注入は不要です。

セットアップを見る →

SSR

サーバーレンダリングで検証済み

Next.jsとViteのコンシューマーフィクスチャでビルドと検証を行っています。ハイドレーションとシステムカラーモードについてはガイドをご覧ください。

SSRガイドを読む →

Webでの対応方法: Web上のMaterialの適応とアクセシビリティ.

バンドルの基準値: 104.6 kB（gzip圧縮後のJavaScriptエントリー）+ 50 kB（gzip圧縮後のCSS全体）。CIで追跡しています。

サポート対象ブラウザー: Chrome 120, Edge 120, Firefox 121, Safari 17.2, iOS 17.2.

プロジェクトで試す

最初のExpressiveコンポーネントを追加しましょう。

パッケージをインストールし、スタイルシートを一度読み込んで、プロバイダーを追加します。デフォルトテーマをすぐに使えます。

npm install @language-lit/material3-expressive react react-dom

インストールガイドを読む GitHubで見る

App.tsx

import {
  Button,
  Material3Provider,
} from '@language-lit/material3-expressive'
import '@language-lit/material3-expressive/styles.css'

export default function App() {
  return (
    <Material3Provider>
      <Button variant="filled">Get started</Button>
    </Material3Provider>
  )
}

Next.jsをお使いですか？ルートレイアウトでスタイルシートを読み込みます。フレームワークガイドを見る →

GoogleのMaterial 3 Expressive。Reactのために。