01 / システム
デザインルールからプロダクト UI まで一貫して構築できます。
Tinyrack は、セマンティックトークン、ライト・ダークテーマ、文書化されたコンポーネントの仕様をつなぎます。
セマンティックトークン
カラー、文字、余白、エレベーションに共通の役割を使い、画面全体の基準を揃えます。
テーマ対応 UI
ライトとダークを切り替えても、コンポーネントの意味と状態を維持します。
コンポーネントの仕様
状態、動作、アクセシビリティが文書化された公開 React API を利用できます。
02 / コンポーネント
すべてのコンポーネントを見る使い慣れたプロダクトフローを構築できます。
フォーム、選択、ステータス、フィードバックに共通の操作パターンを使えます。
03 / はじめる
インストールガイドに進む必要な設定を順番に進めます。
ここではパッケージとコンポーネント API を確認できます。Vite、スタイル、テーマの設定はインストールガイドで説明します。
pnpm add @tinyrack/ui react react-domimport { TRButton } from '@tinyrack/ui/components/button';
export function DeployButton() {
return <TRButton intent="primary">変更をデプロイ</TRButton>;
}04 / 詳しく見る
必要な情報へ続けて進めます。
次に作りたい内容に合ったドキュメントへ進んでください。