はじめに

Tanrei は、各プラットフォームのネイティブなライブラリとして提供されるデザインシステムです。特別なランタイムやクロスプラットフォームのフレームワークを導入する必要はありません。いま開発に使っているプラットフォーム向けのパッケージを追加するだけで、ほかのすべてのプラットフォームと同じトークン、コンポーネント、アクセシビリティの振る舞いが手に入ります。

プレリリース

0.1.0-next.0 を npm の dist-tag next で公開しています。0.1.0 までは、パッケージ名のあとに @next を付けてインストールしてください（npm install @tanrei/web@next）。0.x のプレリリースのあいだは後方互換を保ちません。どのプレリリースも、先に非推奨の期間を置くことなく何でも壊すことがあり、何を壊したかはその changeset に書いてあります。

まだ公開していないもの：SwiftUI、Jetpack Compose、Flutter、React Native。プラットフォームは現在の仕様に追従してから公開し、それまで CI は止めてあります。そのあいだ、各ガイドはソースから加える方法を示しています。

プラットフォームを選ぶ

link

WebCSS カスタムプロパティと Web Components。どのフレームワークでも、フレームワークなしでも使えます。ReactWeb Components から生成した、型付きの React コンポーネント。SwiftUIiOS と macOS 向けの Swift パッケージ。Jetpack ComposeCompose Foundation の上に作った、Material に依存しない Android ライブラリ。FlutterMaterialApp があってもなくても動く、Dart だけで書かれたパッケージ。React Nativeネイティブモジュールを含まない、TypeScript だけのコンポーネント。

同じボタンを、6 通りに

link

すべてのコンポーネントは、プラットフォームに依存しない仕様で一度だけ定義され、各プラットフォームの流儀で実装されます。選んだタブは、サイト内のほかのページでも保持されます。

<tanrei-button variant="tonal">下書きを保存</tanrei-button>

<Button variant="tonal" onClick={saveDraft}>下書きを保存</Button>

TanreiButton("下書きを保存", variant: .tonal) { saveDraft() }

TanreiButton(text = "下書きを保存", onClick = ::saveDraft, variant = TanreiButtonVariant.Tonal)

TanreiButton(variant: TanreiButtonVariant.tonal, onPressed: saveDraft, child: const Text('下書きを保存'))

<Button variant="tonal" onPress={saveDraft}>下書きを保存</Button>

どのプラットフォームでも得られるもの

link

• トークン。 カラーロール、タイプスケール、形状、エレベーション、モーション、状態、スペーシングの値。単一の DTCG ソースから、CSS カスタムプロパティと、Swift・Kotlin・Dart・TypeScript の定数として生成されます。
• テーマ。 ライトとダーク、それぞれに標準・中・高の 3 段階のコントラスト。既定では OS の設定に従い、アプリ全体または一部のサブツリーに対して固定することもできます。
• コンポーネント。 共通仕様の実装です。バリアント、状態、キーボード操作はどこでも同じです。
• アクセシビリティの既定値。 最小ターゲット、見えるフォーカスリング、200% の文字拡大に耐えるテキスト、動きを減らす設定への対応。これらは画面ごとに任されるのではなく、最初から組み込まれています。

このドキュメントの読み方

link

• 基礎では、考え方と規則を説明します。
• トークンリファレンスは、すべての値をトークンファイルから直接描画して一覧にしています。
• コンポーネントのページは、概要・仕様・ガイドライン・アクセシビリティという共通の構成です。ページ内の表はコンポーネントの仕様から生成されるため、古くなることがありません。
• ステータスは、リポジトリから生成されます。
• AI エージェントと Tanrei を使うでは、MCP サーバーのつなぎ方と、コーディングエージェントが Tanrei で UI を書くための規則を示します。