# React Suite デザインシステム

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

日付を選択してローカルの予定を確認したり、モーダルから追加したり、削除したりできます。週末の予定追加は無効になっています。

## React Suite デザインシステムのデザインリファレンス

React Suite 6.2.4のコンパイル済みスタイルシートを使用し、現行のv6 CSS変数ドキュメントと照合しています。以下の値は最初に定義された値またはデフォルト値です。セマンティックエイリアスは、他のプロバイダーテーマでは異なる値に解決される場合があります。カレンダー固有のレイアウトルールは、別途明記しています。

### タイポグラフィ

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --rs-font-family-base | -apple-system, BlinkMacSystemFont, Arial, Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", STXihei, sans-serif | CJKフォールバックを含むシステムフォントスタック。 |
| --rs-html-font-size | 16px | ルートサイズ。 |
| --rs-font-size-sm | 0.875rem | ルートサイズ16pxの場合は14px。デフォルトの本文スケール。 |
| --rs-font-size-md | 1rem | デフォルトのルートサイズで16px。 |
| --rs-font-size-lg | 1.125rem | デフォルトのルートサイズで18px。 |
| --rs-font-size-xl | 1.25rem | デフォルトのルートサイズで20px。 |
| --rs-font-size-2xl | 1.5rem | デフォルトのルートサイズで24px。 |
| --rs-line-height-md | calc(20 / 14) | デフォルトの本文比率。 |
### 間隔と角丸

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --rs-spacing | 0.25rem | 基本のスペーシング単位。 |
| --rs-padding-inline-md | 12px | コンポーネントの標準的な横方向のパディング。 |
| --rs-padding-block-md | 8px | コンポーネントの標準的な縦方向のパディング。 |
| --rs-radius-sm | 0.25rem | デフォルトのルートサイズで4px。 |
| --rs-radius-md | 0.375rem | デフォルトのルートサイズで6px。 |
| --rs-radius-lg | 0.5rem | デフォルトのルートサイズで8px。 |
| --rs-radius-xl | 0.75rem | デフォルトのルートサイズで12px。 |
### プライマリカラーの階調

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --rs-primary-50 | #F2FAFF | デフォルトのプライマリパレット、レベル50。 |
| --rs-primary-100 | #CCE9FF | デフォルトのプライマリパレット、レベル100。 |
| --rs-primary-200 | #A6D7FF | デフォルトのプライマリパレット、レベル200。 |
| --rs-primary-300 | #80C3FF | デフォルトのプライマリパレット、レベル300。 |
| --rs-primary-400 | #59AFFF | デフォルトのプライマリパレット、レベル400。 |
| --rs-primary-500 | #3498ff | デフォルトのプライマリパレット、レベル500。 |
| --rs-primary-600 | #2589F5 | デフォルトのプライマリパレット、レベル600。 |
| --rs-primary-700 | #1675E0 | デフォルトのプライマリパレット、レベル700。 |
| --rs-primary-800 | #0A5DC2 | デフォルトのプライマリパレット、レベル800。 |
| --rs-primary-900 | #004299 | デフォルトのプライマリパレット、レベル900。 |
### セマンティックな背景層と状態

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| --rs-bg-card | var(--rs-gray-0) | カレンダーとアジェンダの背景。 |
| --rs-bg-well | var(--rs-gray-50) | ページ全体の背景。 |
| --rs-bg-overlay | var(--rs-gray-0) | モーダルの背景。 |
| --rs-text-primary | var(--rs-gray-800) | 通常の本文テキスト。 |
| --rs-text-secondary | var(--rs-gray-600) | メタデータと補助情報。 |
| --rs-text-error | var(--rs-color-red) | 入力検証メッセージ。 |
| --rs-border-primary | var(--rs-gray-200) | アジェンダの区切り線とパネルの境界線。 |
| --rs-btn-primary-bg | var(--rs-primary-500) | プライマリボタンの背景色。 |
| --rs-btn-primary-text | var(--rs-gray-0) | プライマリボタンのテキスト。 |
| --rs-state-focus-shadow | 0 0 0 2px rgb(from var(--rs-primary-500) r g b / 25%) | フォーカスの強調表示。 |
### カレンダーの構成上の選択

| 名前 / ルール | 値 / 設定 | 用途 |
| --- | --- | --- |
| isoWeek | true | カレンダーの週は月曜日に始まります。 |
| Initial date | new Date(2026, 9, 14) | 10月を固定表示する例です。JavaScriptの月は0始まりです。 |
| Layout switch | 760px | 独自の1列表示ブレークポイント。 |
| Weekend rule | getDay() is 0 or 6 | カレンダーの制約ではなく、独自のローカルスケジュールポリシーです。 |
## React Suite デザインシステム完全ガイド

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

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

## React Suite デザインシステム：予定表とアジェンダを分けたネイティブカレンダー

### 予定表とアジェンダを分けたネイティブカレンダー

> React Suiteは、コンポーネントを多用するアプリケーションを対象としており、コントロールだけでなくCalendarなどの大きな作業領域も提供します。この例では、コンパイル済みスタイルシートを含むバージョン6.2.4を使用しています。アプリケーション全体をCustomProviderでラップし、Calendar、Panel、Modalなどのコンポーネントをrsuiteからインポートしています。

このカレンダーは、外部と連携するスケジュールサービスを装うものではありません。初期サンプルのセッションが2件あり、ローカルで追加・削除できます。選択中の日付とレコード一覧は別々のReact状態で管理されるため、日付を移動してもスケジュールは変更されません。すべての状態遷移は、完全なAppソースで確認できます。

関連する仕様を確認する

## React Suite デザインシステム v6 CSS変数リファレンス

### v6 CSS変数リファレンス

仕様の根拠は、古いLessのチュートリアルではなく、インストール済みのv6 CSSです。タイポグラフィ、スペーシング、角丸、パレット、セマンティックロールはすべて--rs変数として利用できます。デフォルトの本文には小さいサイズの0.875remが使われますが、ルートの基準は16ピクセルです。この違いがあるため、デフォルトのコントロール面は16ピクセルの本文コンテンツよりも密に見えることがあります。

ページでは、--rs-bg-cardパネルの背面に--rs-bg-wellを使い、予定の区切りには--rs-border-primaryを使っています。マーカーにはprimary-500を、フィールドのエラーにはセマンティックロールのtext-errorを使っています。このリファレンスでは、テキストとサーフェスのエイリアスを維持しているため、プロバイダのテーマによって値の割り当てが変わっても、各ロールの意味が分かりやすく保たれます。

関連する仕様を確認する

## React Suite デザインシステム カレンダー周辺にもライブラリのスケールを活用する

### カレンダー周辺にもライブラリのスケールを活用する

実際の角丸スケールには、デフォルトのルートでsmからxlまで、4、6、8、12ピクセルの値が用意されています。基本のスペーシング単位は0.25remです。これらを装飾用のパレットとして扱うのではなく、提供されているCSSでは、予定表や補足コンテンツに実際のサーフェス変数とテキスト変数を使用しています。

ページの見出しには、行の高さを1.2とした32pxを明示的に指定し、画面幅が狭い場合は28pxに縮小しています。予定表のコンパクトな行に収まるよう、セッション名には17ピクセルを使用しています。こうしたページ固有の指定によって、ライブラリのグローバルなタイポグラフィ変数が上書きされることはありません。そのため、カレンダーのラベルやモーダルのコントロールには、引き続きコンポーネント本来のサイズが適用されます。

関連する仕様を確認する

## React Suite デザインシステム UTCによるずれを避けて選択日を管理する

### UTCによるずれを防いで選択日を制御する

CalendarにはDate値を渡し、onSelectで選択中の日付を更新します。isoWeekを指定すると、表示する週の開始曜日が月曜日になります。初期値はnew Date(2026,9,14)で固定しています。JavaScriptでは月を0から数えるため、9は10月です。このページは意図的に日付を固定したサンプルであり、今日の日付を示すものではありません。

キーを生成する関数ではgetFullYear、getMonth、getDateを使い、ローカル時間に基づくYYYY-MM-DD形式のキーを作成します。UTCに変換され、一部のタイムゾーンでローカルの日付がずれる可能性のあるtoISOString().slice(0,10)は使いません。これらのレコードは時刻を含まない日付を表すため、暗黙にUTC変換を行うと、データにない意味が加わってしまいます。

関連する仕様を確認する

## React Suite デザインシステム 日付マーカーと選択日のコンテンツ

### 日付マーカーと選択日のコンテンツ

renderCellは、その日付のローカルレコードがあるかを確認し、イベントマーカーを小さく表示します。マーカーは補助的な表示です。日付を選択すると、予定表に実際のタイトルが表示されます。色付きの点だけでは予定の内容が分からず、削除する項目も特定できません。

コンパクトなカレンダーは、モバイル表示でも幅を取りすぎません。予定表は独立したPanelで、日付の見出し、セッションカード、ローカルで追加するための操作を備えています。元の760pxのブレークポイントでは、予定表がカレンダーの下に移動します。この構成なら、カレンダーの各セルに長いイベント名を無理に詰め込んだり、読みにくい横長のカレンダーにしたりせずに済みます。

1. 「ナビゲーションのレビュー」があるサンプル日を選択します。

2. 点だけを頼りにせず、予定表でセッション名を確認します。

3. セッションを削除し、レコードがなくなると日付マーカーも消えることを確認します。

関連する仕様を確認する

## React Suite デザインシステム アプリケーションのスケジュールルールを明示する

### アプリケーションのスケジュールルールを明示する

getDay()の値が0または6の日は、週末としてスケジュール追加を無効にしています。ただし、その日付も選択できます。日付が機能していないように見せるのではなく、予定表にルールを説明するためです。警告メッセージが表示され、追加ボタンは無効になります。これはチーム独自のローカルルールであり、React Suite Calendarの制限ではありません。

セッションのない平日には、内容に即した空の状態を表示し、追加操作を引き続き利用できます。セッションを削除するとレコードが更新され、ローカル通知が表示されます。参加者への通知をうたうものではありません。Dateオブジェクト、レコード配列、シンプルなポリシーはすべてソースで確認できるため、実際の製品では意図を明確にしたうえで置き換えられます。

関連する仕様を確認する

## React Suite デザインシステム 入力に集中できる検証付きダイアログ

### 検証機能を備えた、使いやすい登録ダイアログ

「レビューセッションを追加」を開くと、タイトルと以前のエラーがクリアされます。モーダルはヘッダー、タイトル、本文、フッターで構成され、open と onClose は React の状態によって制御されます。入力欄には適切に関連付けられたラベルがあり、無効状態とエラーの説明も設定されています。前後の空白を除いたタイトルが3文字未満の場合、モーダルは開いたままになり、アラートが表示されます。

入力が有効であれば、選択中の日付にレコードを1件追加し、モーダルを閉じて情報メッセージを表示します。Modalコンポーネントが、Escapeキーへの対応やフォーカス管理など、ダイアログの動作を処理します。キャンセルすると、入力中の内容だけが破棄されます。アプリケーション側のタイトルルールを通過したか確認する前に、モーダルを閉じることはありません。

- キャンセルすると、保存前のタイトルは破棄されます。

- 入力が拒否された場合も、修正できるようタイトルはそのまま残ります。

- 有効なタイトルを入力すると、ローカルレコードが1件追加され、カレンダーのマーカーが更新されます。

関連する仕様を確認する

## React Suite デザインシステム v6のスタイルとアプリケーション全体を読み込む

### v6のスタイルとアプリケーション全体を読み込む

Reactプロジェクトにrsuite@6.2.4をインストールし、rsuite/dist/rsuite.min.cssを読み込みます。Appの例には、この読み込み処理、元のstyle.css、CustomProviderのラッパーが含まれています。セットアップのエントリーポイントではReact createRootを使い、外部CDNには依存しません。単独のプレビューには、同じネイティブコンポーネントとCSSがローカルにバンドルされています。

React Suiteには、リセットを含まないスタイルシートの配布版もあります。この例では標準のスタイルシートを意図的に使用しています。両方の配布版を混在させるとスタイルが重複し、ページにどのリセットが適用されているか分かりにくくなるためです。既存のアプリケーションでは、周囲のスタイル設計に合う配布版を選び、フォームと見出しが一緒に正しく表示されることを確認してください。

関連する仕様を確認する

## React Suite デザインシステム 実際のカレンダーには追加のドメイン状態が必要です

### 実用的なカレンダーに必要な追加のドメイン状態

外部のスケジューラーと連携するには、時刻、タイムゾーン、参加者、権限、保存結果が必要です。この日付のみを扱うサンプルでは、そうした項目を勝手に追加したり、状態の更新に成功しただけで招待が送信されたかのように見せたりしません。フッターと通知で、ローカル環境内での操作であることを明示しています。ローカルの日付キー関数はこれらのレコードには適していますが、タイムゾーンを考慮した会議を扱うための完全な方法ではありません。

リモートリクエストを追加する場合は、結果が確定するまで下書きモーダルを開いたままにするか、復旧可能なエラーを表示してください。重複送信を防ぎ、失敗後も選択した日付とタイトルを保持してください。ライブラリが提供するのはインターフェースの基本要素です。アプリケーションの正確性は、それらの基本要素を実際の処理に結び付けることで確保されます。

関連する仕様を確認する

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

### 完成版のカレンダーとアジェンダアプリケーション

日付セルのマーカー、ローカル日付キー、モーダルでの入力フローを備えた制御可能なカレンダー。

```
import React,{useState} from 'react';
import {CustomProvider,Calendar,Panel,Button,Modal,Input,Message,Tag} from 'rsuite';
import 'rsuite/dist/rsuite.min.css';
import './style.css';
const key=d=>`${d.getFullYear()}-${String(d.getMonth()+1).padStart(2,'0')}-${String(d.getDate()).padStart(2,'0')}`;
export default function App(){const[date,setDate]=useState(new Date(2026,9,14)),[open,setOpen]=useState(false),[title,setTitle]=useState(''),[error,setError]=useState(''),[notice,setNotice]=useState(''),[events,setEvents]=useState([{id:1,date:'2026-10-14',title:'Navigation review'},{id:2,date:'2026-10-16',title:'Prototype handoff'}]);const selected=events.filter(e=>e.date===key(date));const weekend=[0,6].includes(date.getDay());function save(){if(title.trim().length<3){setError('Use at least three characters for the session title.');return;}setEvents([...events,{id:Date.now(),date:key(date),title:title.trim()}]);setOpen(false);setNotice('Added to the local calendar only. No invitation was sent.');}
return <CustomProvider><main className='schedule'><header><div><p className='eyebrow'>REACT SUITE / TEAM CADENCE</p><h1>Give the work a place in the week.</h1><p>Select a day to inspect its sessions. Weekend scheduling is disabled in this example.</p></div><Tag color='blue'>Local calendar</Tag></header>{notice&&<Message type='info' closable onClose={()=>setNotice('')}>{notice}</Message>}<div className='schedule-grid'><Panel bordered className='calendar-panel'><Calendar compact bordered isoWeek value={date} onSelect={setDate} renderCell={d=>events.some(e=>e.date===key(d))?<span className='event-dot' aria-label='Has a session'/>:null}/><p className='calendar-legend'><span className='event-dot'/> A date with one or more local sessions</p></Panel><Panel bordered className='agenda-panel'><p className='eyebrow'>{date.toLocaleDateString('en',{weekday:'long'})}</p><h2>{date.toLocaleDateString('en',{month:'long',day:'numeric',year:'numeric'})}</h2>{weekend&&<Message type='warning'>The sample team does not schedule weekend reviews.</Message>}<div className='agenda'>{selected.length?selected.map(e=><article key={e.id}><div><span className='event-kind'>Review session</span><h3>{e.title}</h3></div><Button appearance='subtle' size='sm' aria-label={'Remove '+e.title} onClick={()=>{setEvents(events.filter(x=>x.id!==e.id));setNotice('Removed from the local calendar. No attendee was notified.')}}>Remove</Button></article>):<div className='empty'><h3>No sessions for this day.</h3><p>Choose another date or add a local review session.</p></div>}</div><Button appearance='primary' disabled={weekend} onClick={()=>{setTitle('');setError('');setOpen(true)}}>Add review session</Button></Panel></div><footer>Native React Suite Calendar, Panel, Modal, Input, Message and Button. All dates are local calendar dates; no remote calendar connection.</footer><Modal open={open} onClose={()=>setOpen(false)} size='sm'><Modal.Header><Modal.Title>Add review session</Modal.Title></Modal.Header><Modal.Body><p>For {key(date)}. This adds a record only in the preview.</p><label htmlFor='session-title'>Session title</label><Input id='session-title' value={title} onChange={v=>{setTitle(v);setError('')}} aria-invalid={!!error} aria-describedby='title-error' autoFocus/>{error&&<p id='title-error' role='alert' className='field-error'>{error}</p>}</Modal.Body><Modal.Footer><Button onClick={()=>setOpen(false)} appearance='subtle'>Cancel</Button><Button onClick={save} appearance='primary'>Add locally</Button></Modal.Footer></Modal></main></CustomProvider>}
```

コードリファレンス

- new Date の月の値は0から始まります。

- 日付キーにはUTC変換ではなく、ローカルのカレンダー項目を使用します。

- 週末の制限はアプリケーション側の動作です。

### レスポンシブなカレンダーレイアウト

ネイティブコンポーネントに実際のReact Suiteセマンティック変数を適用します。

```
body{background:var(--rs-bg-well)}.schedule{max-width:1120px;margin:auto;padding:32px;color:var(--rs-text-primary)}header{display:flex;gap:24px;justify-content:space-between;align-items:start;margin-bottom:24px}h1{font-size:32px;line-height:1.2;letter-spacing:-.03em;max-width:650px;margin:8px 0 16px}h2{font-size:24px;line-height:1.3;margin:8px 0 24px}.eyebrow{font-size:11px;letter-spacing:.11em;font-weight:700;color:var(--rs-text-secondary)}.schedule-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;margin-top:20px}.calendar-panel,.agenda-panel{background:var(--rs-bg-card)}.calendar-panel .rs-panel-body{padding:20px}.event-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--rs-primary-500)}.calendar-legend{font-size:12px;color:var(--rs-text-secondary);margin-top:16px}.calendar-legend .event-dot{margin-right:6px}.agenda{margin-bottom:24px}.agenda article{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--rs-border-primary);padding:20px 0}.agenda h3{font-size:17px;line-height:1.3;margin:6px 0}.event-kind{color:var(--rs-text-secondary);font-size:12px}.empty{padding:24px 0;color:var(--rs-text-secondary)}footer{margin-top:24px;font-size:12px;color:var(--rs-text-secondary)}.field-error{color:var(--rs-text-error);font-size:13px;margin-top:8px}label{display:block;margin-bottom:8px;font-weight:600}@media(max-width:760px){.schedule{padding:20px 16px}.schedule-grid{grid-template-columns:1fr}header{flex-direction:column}h1{font-size:28px}.calendar-panel .rs-panel-body{padding:12px}}
```

コードリファレンス

- ページ見出しと760pxのブレークポイントは独自に設定したものです。

## React Suite デザインシステムのエージェント設定

### 実装の出発点

React 19とReact Suite 6.2.4を使用したネイティブの例です。外部のカレンダーサービスは使用していません。アプリケーション全体とスタイルは上記に記載しています。

```
// Create the project first:
// npm create vite@latest react-suite-specimen -- --template react
// cd react-suite-specimen && npm install
// In a React project:
// npm install rsuite@6.2.4
// Save the complete App example as App.jsx and the CSS example as style.css.
import React from 'react';
import {createRoot} from 'react-dom/client';
import App from './App.jsx';
createRoot(document.getElementById('root')).render(<App/>);
// index.html needs <div id="root"></div> and the Vite module entry.
// App.jsx imports rsuite/dist/rsuite.min.css and wraps CustomProvider.
// Keep the template index.html and replace its entry with the code above.
// npm run dev
```

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

```
CustomProviderとネイティブスタイルシートを使用して、React Suite 6.2.4のカレンダーとアジェンダを組み合わせてください。曜日の選択、週末の無効化、ローカルの確認項目を追加するためのModal/Inputフローを維持します。選択した日付とアジェンダ項目はアプリケーションの状態で管理し、確認情報を検証してから追加してください。キャンセル時はアジェンダを変更しないでください。レスポンシブなカレンダーレイアウトと、日付ごとのアジェンダ表示を維持してください。カレンダーへの招待や外部スケジューリングサービスを利用しているかのように示さないでください。
```

## React Suite デザインシステムのソースと対象範囲

React Suite 6.2.4。独自の週末ポリシーとサンプルレコードを使用した、日付のみを扱うローカルカレンダーです。招待や外部スケジューリング機能はありません。

- クイックスタート パッケージとスタイルシートの設定。

- CSS変数 v6のタイポグラフィ、色、スペーシング、角丸。

- カレンダー 制御可能な日付とセルのレンダリングAPI。

- モーダル 複合モーダルとフォーカス動作。

- 入力 テキスト入力コンポーネント。

- CustomProvider プロバイダーレベルのコンポーネント設定。

## React Suite デザインシステム関連リソース

### Skeleton

Skeleton 5.0.1の実際のCerberus、Mint、Roseテーマを、トークンのライブ検査、ダークな背景の組み合わせ、元に戻せるローカル状態を備えた、読書机をイメージした画面で比較します。

### Tabler

実際の 1.6 テーマ変数、タイムラインカード、データグリッドのコンテキスト、モーダルの検証機能を備え、ローカルのチェックポイントを受け入れられる、ネイティブ Tabler プロジェクトジャーナル。ライト／ダークの両テーマに対応した構成です。

### Tamagui

ネイティブコンポーネントを使用した完全な習慣管理ボードで、Tamaguiの実際のv5トークンカテゴリとライト／ダークのブルーテーマを確認できます。入力検証、進捗表示、空の状態からの復帰も備えています。


- [実装リファレンス](https://www.rsuitejs.com/components/calendar/)
- [ソース](https://www.rsuitejs.com/guide/css-variables/)
- [ソース](https://www.rsuitejs.com/components/calendar/)
- [関連する仕様を確認する](https://www.rsuitejs.com/guide/usage/)
- [関連する仕様を確認する](https://www.rsuitejs.com/guide/css-variables/)
- [関連する仕様を確認する](https://www.rsuitejs.com/components/calendar/)
- [関連する仕様を確認する](https://www.rsuitejs.com/components/modal/)
- [コードリファレンス](https://www.rsuitejs.com/components/calendar/)
- [コードリファレンス](https://www.rsuitejs.com/guide/css-variables/)
- [クイックスタート パッケージとスタイルシートの設定。](https://www.rsuitejs.com/guide/usage/)
- [CSS変数 v6のタイポグラフィ、色、スペーシング、角丸。](https://www.rsuitejs.com/guide/css-variables/)
- [カレンダー 制御可能な日付とセルのレンダリングAPI。](https://www.rsuitejs.com/components/calendar/)
- [モーダル 複合モーダルとフォーカス動作。](https://www.rsuitejs.com/components/modal/)
- [入力 テキスト入力コンポーネント。](https://www.rsuitejs.com/components/input/)
- [CustomProvider プロバイダーレベルのコンポーネント設定。](https://www.rsuitejs.com/components/custom-provider/)