# Дизайн-система 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 | 14px при корневом размере 16px; масштаб основного текста по умолчанию. |
| --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 при размере корневого шрифта по умолчанию. |
### Шкала primary

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --rs-primary-50 | #F2FAFF | Уровень 50 палитры primary по умолчанию. |
| --rs-primary-100 | #CCE9FF | Уровень 100 палитры primary по умолчанию. |
| --rs-primary-200 | #A6D7FF | Уровень 200 палитры primary по умолчанию. |
| --rs-primary-300 | #80C3FF | Уровень 300 палитры primary по умолчанию. |
| --rs-primary-400 | #59AFFF | Уровень 400 палитры primary по умолчанию. |
| --rs-primary-500 | #3498ff | Уровень 500 палитры primary по умолчанию. |
| --rs-primary-600 | #2589F5 | Уровень 600 палитры primary по умолчанию. |
| --rs-primary-700 | #1675E0 | Уровень 700 палитры primary по умолчанию. |
| --rs-primary-800 | #0A5DC2 | Уровень 800 палитры primary по умолчанию. |
| --rs-primary-900 | #004299 | Уровень 900 палитры primary по умолчанию. |
### Семантические поверхности и состояния

| Название / правило | Значение / конфигурация | Применение |
| --- | --- | --- |
| --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) | Фиксированный пример для октября; месяц JavaScript отсчитывается с нуля. |
| Layout switch | 760px | Оригинальная точка перехода на одну колонку. |
| Weekend rule | getDay() is 0 or 6 | Оригинальное локальное правило планирования, а не ограничение Calendar. |
## Полное руководство по дизайн-системе React Suite

Практическое руководство по выбору, применению и оценке этой системы для реального интерфейса.

Подробные рекомендации, отправная точка для реализации и ссылки на источники.

## Дизайн-система React Suite: нативный календарь с отдельным списком событий

### Нативный календарь с отдельным списком событий

> React Suite предназначена для приложений с большим количеством компонентов и предлагает как элементы управления, так и более крупные рабочие поверхности, например Calendar. В этом примере используется версия 6.2.4 с её скомпилированной таблицей стилей. Приложение обёрнуто в CustomProvider, а Calendar, Panel, Modal и другие компоненты импортируются из rsuite.

Этот календарь не изображает подключённый сервис планирования. В нём есть два начальных примера событий, а пользователи могут добавлять и удалять записи на устройстве. Выбранный день и список записей — отдельные состояния React, поэтому переход к другой дате не меняет расписание. Все изменения состояния можно проследить в полном исходном коде App.

Прочитать вспомогательную спецификацию

## Справочник переменных дизайн-система React Suite A v6 CSS

### Справочник переменных v6 CSS

Спецификация основана на установленной версии v6 CSS, а не на старом руководстве по Less. Для типографики, отступов, радиусов, палитры и семантических ролей доступны переменные --rs. Для основного текста по умолчанию используется малый размер шрифта — 0.875rem, при этом корневой размер остаётся равным шестнадцати пикселям. Поэтому стандартная поверхность компонента может выглядеть плотнее, чем статья с текстом размером шестнадцать пикселей.

На странице под панелями --rs-bg-card используется фон --rs-bg-well, а для разделителей списка событий — --rs-border-primary. Для маркера применяется primary-500, для ошибки поля — семантическая роль text-error. В справочнике сохранены псевдонимы текста и поверхностей, чтобы роли оставались понятными, даже если тема провайдера задаёт им другие значения.

Прочитать вспомогательную спецификацию

## Дизайн-система React Suite: используйте масштаб библиотеки для элементов вокруг календаря

### Используйте масштаб библиотеки для элементов вокруг календаря

Реальная шкала радиусов включает значения четыре, шесть, восемь и двенадцать пикселей для размеров от sm до xl при размере корневого шрифта по умолчанию. Базовый шаг отступов составляет 0.25rem. Вместо того чтобы воспринимать эти значения как декоративную палитру, в предоставленной CSS используются реальные переменные поверхностей и текста для списка событий и вспомогательного содержимого.

Для заголовка приложения задан размер 32px и межстрочный интервал 1.2; на узких экранах размер уменьшается до 28px. Названия событий набраны шрифтом размером семнадцать пикселей, чтобы помещаться в компактные строки списка. Эти настройки страницы не переопределяют глобальные переменные типографики библиотеки. Поэтому метки календаря и элементы управления модального окна сохраняют нативный размер компонентов.

Прочитать вспомогательную спецификацию

## Дизайн-система React Suite: управление выбранной датой без смещения из-за UTC

### Управление выбранной датой без смещения из-за UTC

Calendar получает значение Date, а onSelect обновляет выбранное значение. Параметр isoWeek задаёт начало отображаемой недели в понедельник. Для начального значения используется new Date(2026,9,14), где девять соответствует октябрю, поскольку месяцы JavaScript отсчитываются с нуля. Это намеренно фиксированный пример, а не утверждение о сегодняшней дате.

Функция формирования ключа использует getFullYear, getMonth и getDate, чтобы получить локальный ключ в формате YYYY-MM-DD. Она не использует toISOString().slice(0,10), который преобразует дату через UTC и в некоторых часовых поясах может сдвинуть локальный календарный день. Эти записи обозначают даты без времени, поэтому неявное преобразование в UTC добавило бы данным отсутствующий в них смысл.

Прочитать вспомогательную спецификацию

## Дизайн-система React Suite: маркеры дат и содержимое выбранного дня

### Маркеры дат и содержимое выбранного дня

renderCell проверяет, есть ли в локальных записях событие на эту дату, и выводит небольшой маркер. Маркер служит лишь дополнением: после выбора даты в списке отображаются названия событий. Одна цветная точка не сообщила бы пользователю, что запланировано, и не помогла бы удалить нужную запись.

Компактный календарь достаточно узкий, чтобы удобно отображаться на мобильном устройстве. Список событий вынесен в отдельную Panel с заголовком даты, карточками событий и действием для локального добавления. При исходной точке перехода 760px список перемещается под календарь. Такая компоновка не вынуждает втискивать полные названия событий в каждую ячейку календаря и не создаёт нечитаемый горизонтальный календарь.

1. Выберите пример дня с обзором навигации.

2. Сверяйте заголовок встречи в расписании, а не полагайтесь на точку.

3. Удалите встречу и убедитесь, что маркер даты исчез, когда записей не осталось.

Прочитать вспомогательную спецификацию

## Правила планирования в дизайн-системе React Suite заданы явно

### Правила планирования приложения заданы явно

Планирование на выходные отключено с помощью значений getDay() — нуля и шести. Календарь по-прежнему позволяет выбирать эти даты, чтобы расписание могло объяснить это правило, а не создавать впечатление, будто день работает некорректно. Появляется предупреждение, а кнопка добавления отключается. Это локальная политика команды, а не ограничение календаря React Suite.

Для буднего дня без встреч отображается специальное сообщение, а действие добавления остаётся доступным. Удаление встречи изменяет записи и показывает локальное уведомление. При этом не утверждается, что участник получил уведомление. Объекты Date, массив записей и простая политика явно представлены в исходном коде, поэтому их можно осознанно заменить для реального продукта.

Прочитать вспомогательную спецификацию

## Диалог добавления с проверкой данных в дизайн-системе React Suite

### Удобное диалоговое окно добавления с проверкой данных

При открытии окна «Добавить сеанс проверки» заголовок и все предыдущие ошибки сбрасываются. Модальное окно состоит из заголовка, названия, основного содержимого и нижней панели; его открытие и onClose контролируются состоянием React. У поля ввода есть связанная с ним подпись, состояние ошибки и описание ошибки. Если заголовок короче трёх символов после удаления пробелов по краям, окно остаётся открытым и отображает предупреждение.

При отправке корректных данных к выбранной дате добавляется одна запись, модальное окно закрывается и появляется информационное сообщение. Компонент Modal отвечает за поведение диалога, включая закрытие клавишей Escape и управление фокусом. Кнопка отмены только закрывает черновик. Приложение не закрывает модальное окно, пока не проверит заголовок по собственному правилу.

- Отмена удаляет несохранённый заголовок.

- Отклонённый заголовок остаётся доступным для исправления.

- Корректный заголовок добавляет одну локальную запись и обновляет маркер в календаре.

Прочитать вспомогательную спецификацию

## Подключите стили v6 и завершите приложение на дизайн-системе React Suite

### Подключите стили v6 и завершите приложение

Установите rsuite@6.2.4 в проект React и импортируйте rsuite/dist/rsuite.min.css. Пример App включает этот импорт, исходный style.css и обёртку CustomProvider. В точке входа настройка использует React createRoot и не зависит от удалённого CDN. В автономную предварительную версию включены те же нативные компоненты и CSS.

React Suite также предоставляет дистрибутив таблицы стилей без сброса стилей. В этом примере намеренно используется стандартная таблица стилей: одновременное подключение обоих дистрибутивов привело бы к дублированию стилей и затруднило бы определение того, какой сброс применяется на странице. В существующем приложении выберите дистрибутив, подходящий к окружающей архитектуре стилей, и проверьте совместное отображение форм и заголовков.

Прочитать вспомогательную спецификацию

## Для настоящего календаря в дизайн-системе React Suite нужны дополнительные данные предметной области

### Для настоящего календаря нужны дополнительные данные предметной области

Подключённому планировщику потребовались бы время, часовые пояса, участники, права доступа и результат сохранения данных. В этом примере только с датами такие поля не выдумываются и не создаётся впечатление, будто успешное обновление состояния отправило приглашение. Нижняя часть окна и уведомления подчёркивают локальный характер примера. Локальная функция формирования ключей дат подходит для этих записей, но не является полноценным решением для встреч с учётом часовых поясов.

При добавлении удалённого запроса оставляйте черновик в модальном окне до подтверждения результата или отображайте ошибку, которую можно исправить. Предотвращайте повторную отправку и сохраняйте выбранную дату и заголовок после сбоя. Библиотека предоставляет элементы интерфейса, а корректность приложения зависит от того, связаны ли эти элементы с реальной операцией.

Прочитать вспомогательную спецификацию

## Примеры компонентов дизайн-системы React Suite

### Полноценное приложение календаря и расписания

Управляемый Calendar с маркерами в ячейках дат, локальными ключами дат и добавлением записей через модальное окно.

```
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 значения месяца нумеруются с нуля.

- Для ключей дат используются поля локального календаря, а не преобразование в 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
```

### Запрос для вашего проекта

```
Используйте компоненты календаря и расписания React Suite 6.2.4 вместе с CustomProvider и нативной таблицей стилей. Сохраните возможность выбирать будние дни, отключённое поведение для выходных и сценарий Modal/Input для добавления локальной записи об отзыве. Храните выбранную дату и записи расписания в состоянии приложения, проверяйте введённые сведения об отзыве перед добавлением и не изменяйте расписание при отмене. Сохраните адаптивную компоновку календаря и отображение расписания для выбранной даты. Не создавайте впечатление, будто отправляется приглашение в календарь или используется внешний сервис планирования.
```

## Источники и область применения дизайн-системы React Suite

React Suite 6.2.4. Локальный календарь только с датами, собственная политика для выходных и примеры записей; приглашения и внешнее планирование не предусмотрены.

- Быстрый старт Настройка пакета и таблицы стилей.

- Переменные CSS Типографика, цвета, интервалы и радиусы v6.

- Calendar Управляемая дата и отрисовка ячеек API.

- Модальное окно Составное модальное окно и управление фокусом.

- Поле ввода Компонент ввода текста.

- CustomProvider Настройка компонентов на уровне провайдера.

## Связанные ресурсы дизайн-системы React Suite

### Skeleton

Сравните настоящие темы Cerberus, Mint и Rose из Skeleton 5.0.1 на примере полноценного рабочего места для чтения: изучите токены в реальном времени, сочетания тёмных поверхностей и состояние, которое можно отменить.

### Tabler

Нативный журнал проектов Tabler с актуальными переменными темы 1.6, карточками временной шкалы, контекстом таблицы данных, валидацией в модальном окне и композицией для светлой и тёмной тем, в которой можно сохранять локальные контрольные точки.

### 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/)
- [Calendar Управляемая дата и отрисовка ячеек 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/)