> ## Documentation Index
> Fetch the complete documentation index at: https://supastack.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> For the full documentation corpus in one file, fetch: https://supastack.dev/llms-full.txt

# UI キットとブロック

共有コンポーネント、デザイントークン、ブロックカタログ。

## 始める前に

[ファイル] → [フォルダーを開く] を使用して、Visual Studio Code でダウンロードした supastack プロジェクトを開き、[ターミナル] → [新しいターミナル] を選択します。リポジトリ ルートは、package.json、アプリ、およびパッケージを含むフォルダーです。そこで以下のコマンドを実行し、ターミナルを開いたままにしておきます。コマンドが認識されない場合は、続行する前にツールのインストール ガイドを完了してください。

まずプラットフォームのチュートリアルをお読みください。サーバーは、ブラウザまたは電話のリクエストに応答するアプリ プロセスです。 Web は apps/web/.env.local を読み取り、Expo は apps/mobile/.env.local を読み取り、データベース移行コマンドは root .env を読み取ります。データベースなしの /dashboard デモは、Postgres の移行が必要な実際の /auth アカウントとは別のものです。電話またはデスクトップのみのチェックアウトには、別途実行される Web バックエンドが必要です。

[ツールをインストールしてコードを取得](https://supastack.dev/ja/docs/web/before-you-start.md)

[コマンド、ファイル、設定を学ぶ](https://supastack.dev/ja/docs/web/terminal-basics.md)

[Web の初回実行チュートリアルを完了する](https://supastack.dev/ja/docs/web/ship-in-5-minutes.md)

```
corepack pnpm --filter @supastack/web dev
```


## インストールとセットアップ

packages/ui-web には共有プロダクトコンポーネント(ボタン、入力、カード、バッジ、ダイアログ、シェル部品)があり、packages/design-tokens は app-theme.css が CSS 変数にマップするトークンソースです。/kit-blocks ルートはブロックカタログ(プロダクトに持ち込める合成セクション)をマウントします。

apps/mobile は同等のネイティブプリミティブとして packages/ui-native を消費するため、サーフェスのスタイリングはプラットフォームごとに保たれつつコントラクトは共有されます。

```
# Preview shared blocks and gallery
corepack pnpm --filter @supastack/web dev
# Then open http://localhost:3000/kit-blocks in your browser

# Theme tokens used by components
var(--page) var(--section) var(--raised)
var(--text) var(--muted) var(--border)
var(--accent) var(--accent-ink) var(--radius-*)
```


## 実装ワークフロー

まず共有コンポーネントから画面を組み立て、キットで表現できないパターンのときだけカスタム要素に頼ってください。新しい共有部品はトークン駆動のスタイリングで ui-web に置き、すべてのテーマパックが自動的に適用されるようにします。

マーケティングコンポーネント(src/marketing)はプロダクトサーフェスの外に、またその逆も — 二つの chrome システムは意図的に分離されています。


## 検証とトラブルシューティング

新しいコンポーネントをすべての density/radius/font プリセットと、少なくともライト・ダーク各一つのパックで検証します。キーボードフォーカス、320px のレイアウト、reduced motion を確認してください。/settings/appearance のキットギャラリーが最速の確認方法です。


## 次へ

[言語とコピー](https://supastack.dev/ja/docs/web/i18n.md)