# Chakra UI デザインシステム

## Chakra UI デザインシステムのインターフェースプレビュー

未入力項目の検証、保存失敗のシミュレーション、入力値の保持、ローカルでの保存完了、外観の切り替えを試せます。

## Chakra UI デザインシステムのデザインリファレンス

Chakra UI 3.37.0 のデフォルトテーマの参照情報と、OpenDesign のアプリケーション固有トークンを明示しています。rem 値はルートフォントサイズに基づき、ピクセル換算値は 16px を前提とします。テーマの完全なエクスポートではなく、実用的な情報を選んで掲載しています。

### デフォルトのセマンティックカラー

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| bg | white / black | ライト／ダークのページ背景。 |
| bg.panel | white / gray.950 | ライト／ダークのカード背景。 |
| bg.subtle | gray.50 / gray.950 | 控えめな背景。 |
| fg | black / gray.50 | 主要テキスト。 |
| fg.muted | gray.600 / gray.400 | 補助テキスト。 |
| border | gray.200 / gray.800 | パネルとコントロールの境界線。 |
| fg.error | red.500 / red.400 | エラーテキスト。 |
| bg.error | red.50 / red.950 | エラー背景。 |
| teal.fg | teal.700 / teal.300 | ティールの淡い背景上のテキスト。 |
| teal.subtle | teal.100 / teal.900 | 現在のステップのスタイル。 |
### この例で使用するプリミティブ値

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| gray.50 | #fafafa | ライトテーマの背景。 |
| gray.200 | #e4e4e7 | ライトテーマの境界線。 |
| gray.800 | #27272a | ダークテーマの境界線。 |
| gray.950 | #111111 | ダークテーマの背景。 |
| teal.700 | #0c5d56 | カスタムのライトアクションはこの値を参照します。 |
| teal.300 | #5eead4 | カスタムのダークアクションはこの値を参照します。 |
### デフォルトのスペーシング（一部）

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| spacing.1 | 0.25rem / 4px | ステータスの上下のパディング。 |
| spacing.2 | 0.5rem / 8px | インラインコントロール間の間隔。 |
| spacing.3 | 0.75rem / 12px | アクショングループ間の間隔。 |
| spacing.4 | 1rem / 16px | 小型ビューポートのパディング。 |
| spacing.6 | 1.5rem / 24px | フォーム項目間の余白。 |
| spacing.8 | 2rem / 32px | 大きなレイアウト間隔。 |
| spacing.10 | 2.5rem / 40px | より広い間隔も利用可能。 |
| spacing.12 | 3rem / 48px | セクション間の余白も利用可能。 |
### 標準のタイポグラフィサブセット

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| fonts.body / fonts.heading | Inter, system fallbacks | フォントトークンを指定しても、Inter自体はダウンロードされません。 |
| fontSizes.xs | 0.75rem | 見本の注釈。 |
| fontSizes.sm | 0.875rem | 補足テキスト。 |
| fontSizes.md | 1rem | 入力欄と通常の本文。 |
| fontSizes.lg | 1.125rem | より大きな本文サイズも利用可能。 |
| fontSizes.xl | 1.25rem | カードの見出し。 |
| fontSizes.2xl | 1.5rem | 見本のタイトル。 |
| fontWeights.medium / semibold | 500 / 600 | ラベルの階層。 |
| lineHeights.shorter / moderate | 1.25 / 1.5 | タイトルと段落のリズム。 |
| letterSpacings.wide | 0.025em | 小さなオーバーライン。 |
### 標準の角丸

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| radii.sm | 0.25rem / 4px | 控えめな角丸。 |
| radii.md | 0.375rem / 6px | この例のステータスチップ。 |
| radii.lg | 0.5rem / 8px | 中程度の角丸。 |
| radii.xl | 0.75rem / 12px | この例のプロフィールカード。 |
| radii.full | 9999px | ピル型の形状。このフォームでは使用しません。 |
### 標準のレスポンシブしきい値

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| sm | 480px | アクション行を横並びにできます。 |
| md | 768px | 進捗カラムをフォームの横に配置します。 |
| lg | 1024px | 広いレイアウトのしきい値も利用可能。 |
| xl | 1280px | デスクトップ向けのしきい値も利用可能。 |
| 2xl | 1536px | 特に広い画面向けのしきい値も利用可能。 |
### アプリケーションのセマンティックトークン：以下で定義

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| workspace.canvas | gray.50 / gray.950 | 明るい／暗いキャンバスのカスタムマッピング。 |
| workspace.action | brand.700 / brand.300 | アクションの背景色をカスタマイズ。ブランドのプリミティブはtheme.jsで宣言します。 |
| workspace.onAction | white / gray.950 | カスタムアクション背景色に対応するテキスト色。 |
## Chakra UI デザインシステム完全ガイド

実際のインターフェースで、このデザインシステムを選び、適用し、レビューするための実践ガイドです。

詳しいガイダンス、実装の出発点、ソースへのリンクをまとめています。

## Chakra UI デザインシステム v3システム：設定、トークン、コンポーネント

### 古いテーマオブジェクトを渡すのではなく、システムを作成する

> 実装は3つのレイヤーで構成されます。theme.jsでデザイン上の決定を定義し、main.jsxでそのシステムを用意し、App.jsxでフォームを組み立てます。createSystem(defaultConfig, config)は、標準のコンポーネントレシピを維持したまま、アプリケーションの設定をマージします。何もないところからカスタムシステムを作るには、より多くの定義が必要です。ここでは、標準設定を拡張する方法を意図的に選んでいます。

プレビューでは、見せかけの代用品ではなくChakraコンポーネントを使用しています。サイドバーはアプリケーション固有の順序付き進捗リストであり、Chakra Stepsコンポーネントを配置しているという意味ではありません。プロフィールカード、フィールド、セレクト、アラート、ボタンは、いずれもChakraの標準的な組み合わせで構成されています。

関連する仕様を確認する

### 各レイヤーに含めるもの

- tokens：再利用可能なプリミティブ値。この例では2つのブランドカラーを含みます。

- semanticTokens：画面ごとに独立した、workspace.actionなどの条件に応じたロール。

- recipes：再利用可能なコンポーネントのバリエーション。アプリケーションのReactの状態に応じて、フォームが無効、処理中、失敗、確認済みのいずれかになります。

## Chakra UI デザインシステムのプリミティブカラーとセマンティックテーマロール

### 見た目が変わる場合はロールを使う

bg.panel と fg.muted は、それぞれ界面表面とテキストの役割を表し、実際の値には gray.950 と gray.400 を使用します。参照表には、ライトモードとダークモードでの値の解決結果を示しています。デモではドキュメントルートをライトとダークの間で切り替えると、各 Field や Card を書き換えずに条件付きの値が有効になります。このローカルの切り替え機能には、状態の保存やシステム設定との連携はありません。

workspace.* ロールは、アプリケーション側で追加したものです。ライトモードでは明るい背景に濃いティールのアクション、ダークモードでは暗い背景に淡いティールのアクションを割り当て、それぞれに組み合わせるテキスト色も指定します。これらは Chakra の公式トークン名ではありません。配色の組み合わせをテーマにまとめることで、ダークモードでボタンの背景色だけが変わり、ラベルが白いままになるのを防げます。

関連する仕様を確認する

### 参照の構文はコンポーネントの省略記法と異なります

トークン定義内では、{colors.gray.950} のように完全な参照を使用します。スタイルプロパティでは、bg="workspace.canvas" のように指定すると、color カテゴリ内で解決されます。複合的な CSS の値では、改めてトークンパス全体が必要です。この違いにより、単なる文字列がテーマ参照として扱われるのを防げます。

```
<Box bg="workspace.canvas" color="fg" border="1px solid {colors.gray.200}" p="4" />
```

コードリファレンス

## Chakra UI デザインシステム：明瞭な文字サイズの段階を明示的なトークンで構成する

### この構成に合わせてスケールを割り当てる

タイトルには fontSize="2xl" と lineHeight="shorter"、カード見出しには xl、補助テキストには sm、見本の注釈には xs を使用します。これらの設定で、見出しの意味的なレベルを変えずに階層を表現できます。画面タイトルは h1、フォームタイトルは h2 です。通常のフォームコンテンツには、デフォルトの本文サイズを使用します。

Chakra のデフォルトの本文・見出し用フォントスタックは Inter から始まり、プラットフォームのフォントにフォールバックします。この単体で動作するデモは外部フォントをリクエストしないため、実際に表示されるフォールバックフォントはオペレーティングシステムによって異なります。正確なタイポグラフィが必要な場合は、適切なライセンスのフォントをローカルで配信してください。フォントトークンを設定するだけでは、フォントファイルは配信されません。

関連する仕様を確認する

### タイポグラフィと意味を切り離す

現在のステップを示すチップは、主要な案内ではなく、コンパクトなメタデータです。必須メッセージとエラーメッセージは、読みやすいサイズでフィールドのそばに表示します。オーバーラインの文字間隔を変更しても、フォームのラベルには影響しません。また、長いワークスペース名は入力欄内に収め、カード全体の幅が変わらないようにします。

## Chakra UI デザインシステム：Field、NativeSelect、Card、Alert を組み合わせる

### Field はスタイル付き入力欄ではなく、関連要素をまとめるコンポジションです

Field.Root はラベル、コントロール、補助テキスト、エラーメッセージをひとまとまりにします。必須フラグと RequiredIndicator で必須項目を示し、invalid でエラー状態を制御します。この例では React を介して入力値を制御し、ワークスペース名のエラーを Field.ErrorText に表示します。切り離された段落にエラースタイルを個別に設定することはありません。

チームの規模には NativeSelect.Root、NativeSelect.Field、NativeSelect.Indicator を使用します。選択肢が少数で固定されている場合に、ネイティブのセレクト操作を維持できます。検索可能なリモート検索結果を提供するものではありません。それには別のコントロールとデータ操作が必要です。

関連する仕様を確認する

### フィードバックは独立したコンポジションで構成する

Card.Header にフォームの識別情報を配置し、Card.Body に編集可能なコンテンツを配置します。Alert.Root でエラーまたは成功のステータスを選び、Alert.Indicator でアイコンを表示し、Alert.Content でタイトルと説明をまとめます。保存失敗のアラートはフィールドの入力検証とは別に表示します。ワークスペース名が有効でも、模擬送信に失敗する場合があるためです。

関連する仕様を確認する

## Chakra UI デザインシステム：スペーシングトークンとレスポンシブなスタイルプロパティを適用する

### 具体的なスペーシング方針

フィールドグループ間には gap="6"、アクション間には gap="3"、進行状況の列とフォームの間には gap="8" を使用します。ページの余白は md で p="4" から p="8" に切り替わります。ルートサイズが 16px の場合、それぞれ 24px、12px、32px、16px、32px に相当します。rem ベースの値は、ユーザーのルートフォントサイズに応じて変化します。

カードには rounded="xl"、ステータスチップには rounded="md" を使用します。大きなコンテナと小さなラベルでは形状が異なるため、意図的に異なる角丸を指定しています。これらの使用例を、すべての Chakra アプリケーションに適用されるデフォルトのルールとして捉えないでください。

関連する仕様を確認する

### md でコンポジションを切り替える

md 未満ではグリッドを 1 列にし、md 以上では 220px の進行状況列と、残りの幅を使うフォームを横に並べます。minmax(0, 1fr) によって、グリッド内でフォームを縮小できます。アクションの配置は sm で切り替わります。これらのオブジェクト値はモバイルファーストの上書きであり、デバイスを判定するものではありません。

```
<Grid templateColumns={{ base: "1fr", md: "220px minmax(0, 1fr)" }} gap="8">
  <Box as="nav" aria-label="Setup progress">…</Box>
  <Card.Root rounded="xl">…</Card.Root>
</Grid>
```

コードリファレンス

## Chakra UI デザインシステム：入力検証、読み込み、エラーからの復旧を連携させる

### プレビューの状態遷移

前後の空白を除いた名前が空の場合、invalid を設定して入力欄にフォーカスします。有効な名前を送信すると pending 状態になり、編集を無効にして Button の loadingText を表示します。ローカルタイマーの終了後、失敗シミュレーション用のチェックボックスに応じて failed または complete を表示します。どちらの状態でも、ネットワークリクエストやデータの保存は行いません。

送信に失敗しても、制御された名前と選択したサイズは保持されます。失敗シミュレーションをオフにすると再試行できます。完了するとプロフィールフィールドが無効になり、最初の進行状況チップが変わります。Reset を押すと編集状態に戻ります。これは表示上の状態の組み合わせを示すものであり、バックエンドへの保存処理を保証するものではありません。

関連する仕様を確認する

### 次の順番で状態を試す

1. フォームをリセットし、名前を入力せずに送信して、フィールドのメッセージとフォーカスされた入力欄を確認します。

2. 名前を入力し、保存失敗のシミュレーションを有効にして送信し、エラー後も入力値が保持されることを確認します。

3. 失敗シミュレーションを無効にしてもう一度送信し、確認済みの概要を確認してから、表示モードを切り替えます。

## Chakra UI デザインシステム：コンポジションを通じてネイティブのセマンティクスを保つ

### 入力検証と進行状況を分かりやすく保つ

この見本では、ブラウザーの入力検証 UI で処理を止めずに、カスタムの Field エラーを表示できるよう、noValidate を使用しています。Field を通じてラベルと入力欄を関連付け、最初の無効な入力欄にフォーカスします。処理中であることはライブステータス領域で伝え、スピナーだけに頼りません。

進行状況リストには順序付きリストのセマンティクスを使用し、現在の項目に aria-current="step" を指定します。利用できない画面への偽のリンクは設けません。プレビューの 2 番目と 3 番目のステップは状況説明であり、クリックできません。これにより、デモの範囲を明確に示します。

関連する仕様を確認する

### カスタムアクションの構成では、フォーカスも重要な要素です

オンボーディング用のバリアントでは、オフセット付きの明示的なフォーカス可視アウトラインを定義します。ダーク表示では、アクションのロールとともにアウトラインのロールも切り替わります。ネイティブのチェックボックスとセレクトは、引き続きキーボードで操作できます。利用するアプリケーションでも、フォーカス、フィールドの読み上げ、拡大表示、スクリーンリーダーの出力を確認してください。コンポーネント単体のサンプルだけでは、オンボーディング製品全体のアクセシビリティは保証できません。

## Chakra UIデザインシステムのレシピ、プロバイダーの設定、バージョンの境界

### Buttonを拡張し、Statusをローカルに定義する

オンボーディング用のButtonバリアントは、theme.recipes.buttonに追加します。設定はdefaultConfigを拡張するため、outlineなどの既存バリアントも引き続き利用できます。ステータスチップではdefineRecipeとuseRecipeをローカルで使用し、stateバリアントによってcurrent、complete、waitingをそれぞれ異なるセマンティックロールに割り当てます。これはアプリケーションのコンポーネントであり、Chakraのエクスポートではありません。

単一要素のレシピは、1つのスタイルオブジェクトを返します。Fieldのような複数パーツからなるコンポーネントには複数のスロットがあり、各パーツをまとめてテーマ設定するにはスロットレシピが必要です。ボタン向けのレシピをField全体に適用しても、ラベル、コントロール、エラーを個別に制御することはできません。

関連する仕様を確認する

### 提供されたファイルを組み合わせて使う

セットアップ用コマンドでViteのReactプロジェクトを作成し、デフォルトのAppおよびmainモジュールを以下の例に置き換えて、theme.jsを追加します。JSXの例ではJavaScriptを使用するため、カスタムトークン名やバリアント名に対してTypeScriptの宣言を生成する必要はありません。TypeScriptに適用する場合は、テーマファイルに対してChakra CLIのtypegenを実行してください。

v2のextendTheme設定をインポートしたり、このv3プロバイダーにtheme={...}を渡したりしないでください。実際のルートではChakraProvider value={system}を使用します。この例では、カラーモード用のプロバイダーを別途追加していません。この独立したプレビューではローカルのlight/darkクラス切り替えで十分ですが、実際のアプリでは設定の永続化やサーバーサイドレンダリングへの対応が必要になる場合があります。

関連する仕様を確認する

## Chakra UIデザインシステム：テーマとフォームを一緒に検証する

### このサンプルで確認できること

意味のあるレビュー単位は、ライト表示とダーク表示それぞれのプロフィールカード全体です。ラベル、入力欄、補助テキスト、入力エラーのフィードバック、処理中のボタン、失敗アラート、成功サマリーをまとめて確認します。ボタンだけでは、セマンティックな背景の欠落や、エラー状態がラベルと関連付けられていないコントロールを見落とす可能性があります。

リファレンス表と、実際に描画されたインターフェースを比較します。カスタムのティール色のアクションはデフォルトのアウトラインアクションと異なること、フィールド間の間隔が6であること、md未満ではグリッドが1列になることを確認してください。こうした確認により、記述されたルールと描画結果を照合できます。

### この例では扱わないこと

このプレビューには、アカウント作成、招待の送信、データの永続化、認証、他のオンボーディング画面との連携はありません。タイマーはシミュレーションであることを明示しています。実際のエンドポイントに接続する場合は、ここで示すフィールドの状態とリクエストの状態の区別を保ち、タイマーをリクエストに置き換えてください。また、完了がローカルでの受け付け、リモートへの保存、完全な有効化のいずれを意味するのかを定義してください。

## Chakra UIデザインシステムのコンポーネント例

### theme.js — プリミティブトークン、セマンティックロール、レシピ

このサンプルで使用するアプリケーションテーマ全体です。workspaceロールとオンボーディング用バリアントは独自に追加したもので、defaultConfigによってChakraの標準テーマが提供されます。

```
import { createSystem, defaultConfig, defineConfig, defineRecipe } from '@chakra-ui/react';

export const statusRecipe = defineRecipe({
  base: { display: 'inline-flex', px: '2', py: '1', rounded: 'md', fontSize: 'xs', fontWeight: 'semibold' },
  variants: {
    state: {
      current: { bg: 'teal.subtle', color: 'teal.fg' },
      complete: { bg: 'bg.success', color: 'fg.success' },
      waiting: { bg: 'bg.muted', color: 'fg.muted' },
    },
  },
  defaultVariants: { state: 'waiting' },
});

const config = defineConfig({
  theme: {
    tokens: { colors: { brand: { 700: { value: '#0c5d56' }, 300: { value: '#5eead4' } } } },
    semanticTokens: { colors: {
      'workspace.canvas': { value: { base: '{colors.gray.50}', _dark: '{colors.gray.950}' } },
      'workspace.action': { value: { base: '{colors.brand.700}', _dark: '{colors.brand.300}' } },
      'workspace.onAction': { value: { base: '{colors.white}', _dark: '{colors.gray.950}' } },
    } },
    recipes: {
      button: defineRecipe({ variants: { variant: {
        onboarding: {
          bg: 'workspace.action', color: 'workspace.onAction',
          _hover: { opacity: 0.9 },
          _focusVisible: { outline: '2px solid', outlineColor: 'workspace.action', outlineOffset: '2px' },
        },
      } } }),
    },
  },
});
export const system = createSystem(defaultConfig, config);
```

コードリファレンス

- ブランドカラーには、参照されているティールのプリミティブと意図的に同じ値を使用しています。

- statusレシピはローカル定義で、Buttonバリアントはシステムに登録されています。

### App.jsx — ネイティブフォームと状態の完全なサンプル

プレビューで実際に使用しているReactの構成です。テーマの切り替え、Fieldのバリデーション、ネイティブのセレクト、処理中のフィードバック、シミュレーションによる失敗、確認、リセットが含まれています。

```
import React, { useEffect, useRef, useState } from 'react';
import { Box, Button, Card, Field, Grid, Heading, Input, NativeSelect, Stack, Text, Alert, chakra, useRecipe } from '@chakra-ui/react';
import { statusRecipe } from './theme';

function Status({ state, children }) {
  const recipe = useRecipe({ recipe: statusRecipe });
  return <chakra.span css={recipe({ state })}>{children}</chakra.span>;
}

export default function App() {
  const [dark, setDark] = useState(false);
  useEffect(() => { document.documentElement.className = dark ? 'dark' : 'light'; }, [dark]);
  const [name, setName] = useState('Northstar Studio');
  const [size, setSize] = useState('2–10');
  const [invalid, setInvalid] = useState(false);
  const [phase, setPhase] = useState('editing');
  const [simulateFailure, setSimulateFailure] = useState(false);
  const nameInput = useRef(null);
  const pending = phase === 'pending';
  const complete = phase === 'complete';
  const save = (event) => {
    event.preventDefault();
    if (!name.trim()) { setInvalid(true); nameInput.current?.focus(); return; }
    setInvalid(false); setPhase('pending');
    window.setTimeout(() => setPhase(simulateFailure ? 'failed' : 'complete'), 600);
  };
  return <Box className={dark ? 'dark' : 'light'} bg='workspace.canvas' color='fg' p={{ base: '4', md: '8' }}>
    <Box maxW='960px' mx='auto'>
      <Stack direction={{ base: 'column', sm: 'row' }} justify='space-between' align={{ base: 'stretch', sm: 'center' }} gap='4' mb='8'>
        <Box><Text fontSize='xs' fontWeight='semibold' color='teal.fg' letterSpacing='wide'>CHAKRA UI · NATIVE SPECIMEN</Text><Heading as='h1' fontSize='2xl' lineHeight='shorter' mt='2'>Set up your workspace</Heading></Box>
        <Button variant='outline' size='sm' onClick={() => setDark(!dark)} aria-pressed={dark}> {dark ? 'Light appearance' : 'Dark appearance'} </Button>
      </Stack>
      <Grid templateColumns={{ base: '1fr', md: '220px minmax(0, 1fr)' }} gap='8'>
        <Box as='nav' aria-label='Setup progress'>
          <Stack as='ol' gap='6' listStyleType='none' m='0' p='0'>
            <Box as='li' aria-current={complete ? undefined : 'step'}><Status state={complete ? 'complete' : 'current'}>{complete ? 'Complete' : 'Current'}</Status><Text fontWeight='semibold' mt='2'>1. Workspace profile</Text><Text fontSize='sm' color='fg.muted'>Name and team size</Text></Box>
            <Box as='li'><Status state='waiting'>Next</Status><Text fontWeight='medium' mt='2'>2. Invite your team</Text><Text fontSize='sm' color='fg.muted'>Available in the full product</Text></Box>
            <Box as='li'><Status state='waiting'>Optional</Status><Text fontWeight='medium' mt='2'>3. Connect tools</Text><Text fontSize='sm' color='fg.muted'>Complete this later</Text></Box>
          </Stack>
          <Box mt='8' borderTopWidth='1px' borderColor='border' pt='4'><Text fontSize='xs' color='fg.muted'>Scale in this specimen</Text><Text fontSize='sm' mt='2'>Field gap 6 · Card padding 6<br/>Page gap 8 · Radius xl</Text></Box>
        </Box>
        <Card.Root bg='bg.panel' borderColor='border' rounded='xl'>
          <Card.Header><Heading as='h2' fontSize='xl'>Workspace profile</Heading><Text color='fg.muted' fontSize='sm'>The name appears on your team's workspace.</Text></Card.Header>
          <Card.Body>
            <form onSubmit={save} noValidate>
              <Stack gap='6'>
                <Field.Root required invalid={invalid} disabled={pending || complete}>
                  <Field.Label>Workspace name <Field.RequiredIndicator /></Field.Label>
                  <Input ref={nameInput} value={name} onChange={e => {setName(e.target.value);setInvalid(false);}} autoComplete='organization' />
                  <Field.HelperText>Use a name your teammates will recognize.</Field.HelperText>
                  <Field.ErrorText>Enter a workspace name.</Field.ErrorText>
                </Field.Root>
                <Field.Root disabled={pending || complete}>
                  <Field.Label>Team size</Field.Label>
                  <NativeSelect.Root><NativeSelect.Field value={size} onChange={e => setSize(e.target.value)}><option>Just me</option><option>2–10</option><option>11–50</option><option>51+</option></NativeSelect.Field><NativeSelect.Indicator /></NativeSelect.Root>
                  <Field.HelperText>Used only for this local preview summary.</Field.HelperText>
                </Field.Root>
                <Box><label style={{display:'flex',gap:'8px',alignItems:'center',fontSize:'14px'}}><input type='checkbox' checked={simulateFailure} disabled={pending || complete} onChange={e=>setSimulateFailure(e.target.checked)} />Simulate a failed save</label></Box>
                {phase === 'failed' && <Alert.Root status='error'><Alert.Indicator /><Alert.Content><Alert.Title>Demo save failed</Alert.Title><Alert.Description>Your values are still here. Turn off failure simulation and retry.</Alert.Description></Alert.Content></Alert.Root>}
                {complete && <Alert.Root status='success'><Alert.Indicator /><Alert.Content><Alert.Title>Profile confirmed in this preview</Alert.Title><Alert.Description>{name.trim()} · {size} people. Nothing was sent or stored.</Alert.Description></Alert.Content></Alert.Root>}
                <Stack direction={{base:'column',sm:'row'}} gap='3'>
                  <Button type='submit' variant='onboarding' loading={pending} loadingText='Checking profile' disabled={complete}>Confirm profile</Button>
                  <Button type='button' variant='outline' disabled={pending} onClick={()=>{setPhase('editing');setInvalid(false);setName('');setSize('2–10');setSimulateFailure(false);nameInput.current?.focus();}}>Reset example</Button>
                </Stack>
                <Text role='status' aria-live='polite' fontSize='sm' color='fg.muted'>{pending ? 'Simulating a response. No network request is made.' : complete ? 'Profile step complete. Reset to try another state.' : 'Try an empty name, a failed save, or a different appearance.'}</Text>
              </Stack>
            </form>
          </Card.Body>
        </Card.Root>
      </Grid>
      <Text mt='6' fontSize='xs' color='fg.muted'>Actual Chakra UI 3.37.0 components. Custom workspace semantic tokens and button recipe. Memory-only demonstration.</Text>
    </Box>
  </Box>;
}
```

コードリファレンス

- リクエストは送信されません。600msの遅延で処理中のUIを示しています。

- 次のステップは状況を示すラベルであり、実際のナビゲーション機能はありません。

## Chakra UIデザインシステムのAIエージェント設定

### 実装の出発点

インストール済みのViteリリースとChakraがサポートするNode.jsを使用してください（ChakraではNode 20以降が案内されています）。このブロックでは、ターミナルコマンドとsrc/main.jsxを分けて示しています。themeファイルとAppファイルの全体は上に掲載しているため、隠れたプロバイダースニペットや外部のCSSは必要ありません。

```
# Terminal: create a JavaScript React application
npm create vite@latest chakra-profile -- --template react
cd chakra-profile
npm install
npm install @chakra-ui/react@3.37.0 @emotion/react

# Save the two complete examples as src/theme.js and src/App.jsx.
# Replace src/main.jsx with:
import React from 'react';
import { createRoot } from 'react-dom/client';
import { ChakraProvider } from '@chakra-ui/react';
import { system } from './theme';
import App from './App';
createRoot(document.getElementById('root')).render(<ChakraProvider value={system}><App /></ChakraProvider>);

# Start from the project directory:
npm run dev
```

### あなたのプロジェクト向けプロンプト

```
Chakra UI 3.37.0と、用意されているtheme.jsおよびApp.jsxを出発点として使用してください。workspaceのセマンティックロール、Fieldの構成、ネイティブのセレクト、入力エラーと送信失敗の区別を維持します。シミュレーション用のタイマーだけを実際の永続化APIに置き換え、結果が確定する前にプロフィールを完了扱いにしないでください。キーボードフォーカス、レスポンシブなbase/mdレイアウト、ライト／ダークの値も維持してください。新しいトークンやレシピバリアントを追加する場合は、その理由を説明してください。
```

## Chakra UIデザインシステムの情報源と対象範囲

ドキュメントに記載されたChakra UI v3の基盤を使用した、独自のOpenDesign実装ガイドです。デフォルトのトークン参照と、アプリケーション固有のworkspaceロールを分けています。ネイティブのプレビューはローカル状態のデモであり、workspaceデータの保存やオンボーディング全体の実装は行いません。

- アーキテクチャ アーキテクチャに関するChakra UI公式リファレンス。

- デザイントークン トークンに関するChakra UI公式リファレンス。

- セマンティック セマンティックに関するChakra UI公式リファレンス。

- カラー カラーに関するChakra UI公式リファレンス。

- スペーシング スペーシングに関するChakra UI公式リファレンス。

- タイポグラフィ タイポグラフィに関するChakra UI公式リファレンス。

- 角丸 角丸に関するChakra UI公式リファレンス。

- ブレークポイント ブレークポイントに関するChakra UI公式リファレンス。

- レシピ レシピに関するChakra UI公式リファレンス。

- カスタムレシピ カスタムレシピに関するChakra UI公式リファレンス。

- Field Fieldに関するChakra UI公式リファレンス。

- Button buttonに関するChakra UI公式リファレンス。

- Card Cardに関するChakra UI公式リファレンス。

- ネイティブセレクト ネイティブセレクトに関するChakra UI公式リファレンス。

- Alert アラートに関するChakra UI公式リファレンス。

- レスポンシブ レスポンシブに関するChakra UI公式リファレンス。

- インストール インストールに関するChakra UI公式リファレンス。

## Chakra UIデザインシステムの関連リソース

### CoreUI

実際の5.9テーマ変数、ネイティブタブ、チェックボックスによる一括選択、直前のローカルなアーカイブ操作を取り消せる常時表示のトーストを使用して構築した、CoreUIのレビューキューです。

### daisyUI

CSSネイティブの招待状作成ツール。daisyUIの5つのセマンティックテーマ、文字色との組み合わせ、ラジオボタンの連結、範囲コントロール、ブラウザー標準の検証、実際のダイアログを使った確認ステップを紹介します。

### Element Plus

Element Plusの実際のTransferモデル、フィルター、無効化されたオプションを使って、モジュール選択用のワークベンチを構築します。色、文字サイズ、コントロールの寸法は検証済みの値に基づいています。


- [実装リファレンス](https://chakra-ui.com/docs/components/field)
- [ソース](https://chakra-ui.com/docs/theming/colors)
- [ソース](https://chakra-ui.com/docs/theming/spacing)
- [ソース](https://chakra-ui.com/docs/theming/typography)
- [ソース](https://chakra-ui.com/docs/theming/radii)
- [ソース](https://chakra-ui.com/docs/theming/breakpoints)
- [ソース](https://chakra-ui.com/docs/theming/semantic-tokens)
- [関連する仕様を確認する](https://chakra-ui.com/docs/theming/overview)
- [関連する仕様を確認する](https://chakra-ui.com/docs/theming/semantic-tokens)
- [コードリファレンス](https://chakra-ui.com/docs/theming/tokens)
- [関連する仕様を確認する](https://chakra-ui.com/docs/theming/typography)
- [関連する仕様を確認する](https://chakra-ui.com/docs/components/field)
- [関連する仕様を確認する](https://chakra-ui.com/docs/components/alert)
- [関連する仕様を確認する](https://chakra-ui.com/docs/theming/spacing)
- [コードリファレンス](https://chakra-ui.com/docs/styling/responsive-design)
- [関連する仕様を確認する](https://chakra-ui.com/docs/components/button)
- [関連する仕様を確認する](https://chakra-ui.com/docs/theming/recipes)
- [コードリファレンス](https://chakra-ui.com/docs/theming/overview)
- [コードリファレンス](https://chakra-ui.com/docs/components/field)
- [アーキテクチャ アーキテクチャに関するChakra UI公式リファレンス。](https://chakra-ui.com/docs/theming/overview)
- [デザイントークン トークンに関するChakra UI公式リファレンス。](https://chakra-ui.com/docs/theming/tokens)
- [セマンティック セマンティックに関するChakra UI公式リファレンス。](https://chakra-ui.com/docs/theming/semantic-tokens)
- [カラー カラーに関するChakra UI公式リファレンス。](https://chakra-ui.com/docs/theming/colors)
- [スペーシング スペーシングに関するChakra UI公式リファレンス。](https://chakra-ui.com/docs/theming/spacing)
- [タイポグラフィ タイポグラフィに関するChakra UI公式リファレンス。](https://chakra-ui.com/docs/theming/typography)
- [角丸 角丸に関するChakra UI公式リファレンス。](https://chakra-ui.com/docs/theming/radii)
- [ブレークポイント ブレークポイントに関するChakra UI公式リファレンス。](https://chakra-ui.com/docs/theming/breakpoints)
- [レシピ レシピに関するChakra UI公式リファレンス。](https://chakra-ui.com/docs/theming/recipes)
- [カスタムレシピ カスタムレシピに関するChakra UI公式リファレンス。](https://chakra-ui.com/docs/theming/customization/recipes)
- [Field Fieldに関するChakra UI公式リファレンス。](https://chakra-ui.com/docs/components/field)
- [Button buttonに関するChakra UI公式リファレンス。](https://chakra-ui.com/docs/components/button)
- [Card Cardに関するChakra UI公式リファレンス。](https://chakra-ui.com/docs/components/card)
- [ネイティブセレクト ネイティブセレクトに関するChakra UI公式リファレンス。](https://chakra-ui.com/docs/components/native-select)
- [Alert アラートに関するChakra UI公式リファレンス。](https://chakra-ui.com/docs/components/alert)
- [レスポンシブ レスポンシブに関するChakra UI公式リファレンス。](https://chakra-ui.com/docs/styling/responsive-design)
- [インストール インストールに関するChakra UI公式リファレンス。](https://chakra-ui.com/docs/get-started/installation)