Design System
A collection of React components, design patterns, and guidelines for building consistent interfaces.
Snack
66
Базовые UI-кирпичики дизайн-системы: кнопки, поля, навигация, оверлеи. Подходят для любого продукта.
Actions
4
- ButtonПакет кнопок дизайн-системы — компоненты Button и ButtonGroup с едиными токенами размеров, appearance и view.
- Button ComboКнопка с основным действием и выпадающим списком дополнительных действий.
- LinkСемантическая ссылка дизайн-системы — 10 appearance, полиморфный рендер (a / button / кастомный компонент), inline-режим в тексте и интеграция с TruncateString.
- ToolbarПанель инструментов списков и таблиц — поиск, фильтры, массовые действия, меню «Ещё».
Inputs & Forms
13
- CalendarПакет календаря и выбора времени — Calendar с режимами даты, диапазона и месяца/года, TimePicker и TimePickerDropdown для времени в составе полей ввода.
- ChipsПакет чипов дизайн-системы — ChipAssist, ChipToggle, семейство ChipChoice и ChipChoiceRow для действий, переключения и фильтрации.
- CodeEditorОбёртка над monaco-editor с темизацией на токенах дизайн-системы, шапкой с языком и кнопкой копирования, async/lazy-загрузкой и JSON/YAML-валидацией по schema.
- ColorPickerКомпонент выбора цвета с палитрой, переключаемыми цветовыми моделями (HEX/RGB/HSV), альфа-каналом и опциональным режимом ручного применения.
- DropzoneПакет загрузки файлов — видимая зона Dropzone, триггер FileUpload и скрытая оверлей-зона HiddenDropZone над произвольным контентом.
- FieldDecoratorСтруктурная обёртка label/caption/hint/error/length для нестандартных input'ов и сложных композиций.
- FieldsПоля ввода с единой обёрткой label/caption/hint/error и общими осями size/validationState — текст, пароль, число, ползунок, дата, время, выбор, цвет.
- MarkdownПросмотр и редактирование markdown — рендер GFM и WYSIWYG-редактор на TipTap.
- RatingЗвёздный рейтинг — интерактивный ввод и отображение оценки. Поддерживает половинные звёзды, цветовые схемы и readonly-режим.
- SearchКомпонент поискового поля — три размера, фон, рамка состояния, состояния loading и disabled, слот для действия внутри поля.
- SegmentControlСегментированный переключатель — компактная радио-группа с единственным выбором, токенами размеров s/m/l, иконками, счётчиками и режимом полной ширины.
- SliderПолзунок для выбора числового значения или диапазона — с метками, tooltip на ручке и опциональным равномерным распределением нелинейных значений.
- TogglesПакет компонентов выбора и переключения — Checkbox, Radio, Switch, Favourite и контейнер ToggleGroup с общими токенами размеров и состояний.
Navigation
4
- BreadcrumbsХлебные крошки — навигационная цепочка пути до текущей страницы с адаптивным поведением при нехватке места.
- PaginationПакет пагинации — компоненты Pagination с нумерованными страницами и PaginationSlider для плотной мини-навигации.
- StepperАдаптивный индикатор прогресса для многошаговых сценариев — единый render-prop API, раскладка из AdaptiveProvider.
- TabsПакет табов — compound-компонент Tabs c субкомпонентами TabBar, Tab и TabContent для горизонтальной и вертикальной навигации.
Data display
11
- AttachmentПакет компонентов для отображения прикреплённых файлов — Attachment (горизонтальный) и AttachmentSquare (квадратный).
- AvatarАватар пользователя с фото, инициалами, размерами и цветовыми схемами.
- CounterКомпактный счётчик для отображения числовых меток, бейджей и состояний.
- InfoBlockИнформационный блок — заголовок, описание, опциональные иконка и футер. Базовый строительный элемент для пустых состояний, подсказок и карточек.
- ListСписочный UI — компонент List для плоских/вложенных списков с выбором, группами и поиском и Droplist — тот же список в поповере.
- PromoTagПромо-тег — цветной лейбл для маркетинговых акцентов, выделения категорий и статусных ярлыков. Опционально кликабельный.
- StatusПакет статус-индикаторов — компоненты Status (подпись + маркер) и StatusIndicator (только маркер). Цветовая семантика состояний и поддержка loading/progress.
- TableТаблица данных: клиентская Table, серверная ServerTable и preset-обёртки с упрощённым API.
- TagПакет компактных меток — компонент Tag (опционально удаляемый или ссылочный) и контейнер TagRow для групп меток с обрезанием по строкам.
- TimelineПакет таймлайна — вертикальная цепочка событий с маркерами, соединительными линиями и опциональным контентом в противоположной колонке.
- TreeИерархический список с раскрывающимися узлами, выбором (single/multiple), кастомными иконками, контекстными действиями и асинхронной подгрузкой потомков.
Overlays
7
- BottomSheetMobile-first overlay-контейнер с drag-handle и swipe-down для диалогов, выпадающих списков и фильтров. Поддерживает snap-points (раскрытие на половину → full).
- DrawerПакет выезжающих панелей — компоненты Drawer и DrawerCustom с едиными токенами позиции и ширины.
- DropdownВыпадающий блок с произвольным контентом и встроенными состояниями loading / not-found / no-data / data-error.
- ModalПакет модальных окон — компоненты Modal и ModalCustom с едиными токенами ширины и режимов закрытия.
- PopoverПлавающая панель с произвольным содержимым рядом с триггером — для меню, подсказок, форм и вложенных действий.
- ToasterСистема всплывающих уведомлений с тремя типами контента и императивным API.
- TooltipПакет подсказок — компонент Tooltip для произвольного триггера и QuestionTooltip с иконкой «?» для полей форм и сложной терминологии.
Layout & containers
6
- AccordionАккордеон дизайн-системы — контейнер Accordion и три уровня раскрываемых блоков CollapseBlock с общими токенами view, backgroundPredefined и chevronPosition.
- BlockСлот-поверхность с акриловым фоном (матовое/полупрозрачное стекло) для композиции содержимого на разных подложках.
- CardКорневая карточка с осями radius, view и слоем backgroundPredefined + acrylic.
- CarouselКомпонент горизонтальной прокрутки слайдов — стрелки, пагинация, свайп, автопрокрутка, infinite scroll и multi-item отображение.
- DividerРазделитель контента с горизонтальной и вертикальной ориентацией и вариантами толщины линии.
- ScrollКонтейнер с кастомными скроллбарами, размерами s/m, стратегиями скрытия, автоскролом и опциональным ресайзом.
Feedback
5
- AlertСемантическое уведомление — компонент Alert для inline-нотификаций в контенте и AlertTop для системных баннеров по верхней кромке.
- HotSpotПульсирующая точка-индикатор, привязанная к целевому элементу — подсказка внимания и обучающий акцент.
- LoaderИндикаторы загрузки — Spinner (круговой прогресс) и Sun (лучевой индикатор).
- ProgressBarПакет индикаторов прогресса дизайн-системы — линейный ProgressBar, круговой ProgressBarCircle и верхний page-индикатор ProgressBarPage.
- SkeletonПакет скелетонов дизайн-системы — компоненты Skeleton, SkeletonText и WithSkeleton для индикации состояния загрузки.
Typography
2
- TruncateStringОбрезает длинный текст и показывает полный текст в тултипе — варианты `end` и `middle`, поддержка многострочного обрезания.
- TypographyУниверсальный текстовый компонент с едиными токенами стиля — variant / size / weight — и автовыбором семантического тега.
Foundation & utilities
14
- AdaptiveReact Context текущей раскладки (layoutType) — переключает компоненты дизайн-системы между mobile и desktop поверхностями.
- Context KitОснова всех сквозных провайдеров дизайн-системы — версионно-устойчивый React-контекст-синглтон поверх useSyncExternalStore, безопасный для SSR и микрофронтов.
- DragAndDropВизуальные примитивы перетаскивания — поверхность копии, линия вставки и зона приёма.
- FontsПодключение фирменных шрифтов SB Sans Interface, Inter и Roboto Mono — единый CSS/SCSS-импорт для всего приложения.
- IconPredefinedSVG-иконка с предустановленным оформлением — цветной подложкой, размером и формой контейнера.
- IconsНаборы интерфейсных иконок React и компонент Sprite для SVG-спрайтов.
- InputPrivateБазовая обёртка `<input>` с состояниями, иконками, кнопкой очистки и счётчиком — фундамент для публичных полей ввода (Search, FieldText и пр.).
- LocaleРантайм локализации — строки живут в самих пакетах (defineLocale/defineMessages), провайдер несёт только язык.
- MaterialsSCSS-миксины для материалов (акрил, state layer) — вспомогательные стили для компонентов дизайн-системы.
- PopoverPrivateНизкоуровневый popover на @floating-ui — позиционирование, стрелка, триггеры. Используется как фундамент для Tooltip, Popover, Dropdown.
- PortalContextReact Context, который задаёт DOM-узел для портальных компонентов (Tooltip, Popover, Dropdown, Modal, Drawer).
- SearchPrivateБазовый input для поиска без иконок и плейсхолдеров — фундамент для публичного `@cloud-ru/ds-search` и доменных search-компонентов.
- ThemeПровайдер оформления — оси (цветовая схема, бренд, плотность, акрил) живут в контексте, полный набор sn-* классов эмитится на DOM-границе.
- UtilsХуки и хелперы для React-компонентов — controlled/uncontrolled, дебаунс, свайпы, модалки, персист данных, пропы и SSR.
Uikit Product
22
Продуктовые компоненты поверх базовых: композиции для типовых сценариев продуктовых интерфейсов (карточки, копирование, info-row).
Actions
3
- ButtonDropdownFunction-кнопка с выпадающим списком (desktop) или modal (mobile).
- CopyПакет копирования значений в буфер — компоненты CopyButton и CopyLine с единой логикой clipboard и иконкой подтверждения.
- TitleClickableКликабельный заголовок-ссылка раздела с иконкой, шевроном и опциональным аватар-блоком — для шапок продуктовых разделов.
Inputs & Forms
5
- ConfigSelectorChip-toggle для выбора одной опции конфигурации — кликабельный chip с состояниями checked / available / disabled и tooltip-подсказками.
- Fields PredefinedНабор предопределённых полей формы поверх @cloud-ru/ds-fields — телефон, маски, имя, описание, код и другие готовые сценарии ввода.
- SwitchRowКликабельная строка настройки с заголовком, описанием и Switch — целиком кликабельна, поддерживает клавиатуру и tooltip-подсказки.
- TogglesPredefinedКликабельные карточки выбора (ToggleCard) и группа выбора (ToggleGroup) — предзаготовленный паттерн single/multiple-выбора на базе @cloud-ru/ds-card.
- UploadFilesПоле загрузки файлов с drag-and-drop, валидацией по формату/размеру/количеству и кастомной функцией upload.
Data display
7
- AvatarDetailТиповой пользовательский блок из продуктового UI Kit: аватар с необязательным статус индикатором, имя, контактные данные для копирования и вторичное описание.
- CardPredefinedПресеты карточек Product UI Kit — CardBanner, CardService, CardServiceLight, CardServiceSmall, CardSuggest, CardCustom.
- InfoRowСтроки «метка — значение» по макету Figma infoRow — компонент InfoRow и группа InfoGroup по данным.
- Price summaryБлоки итоговой цены для checkout и конфигураторов — полный PriceSummary и компактный PriceSummarySmall.
- PromoTagPredefinedПредопределённый промо-тег продукта с локализованным текстом и tooltip — пресеты product-статусов Cloud.ru.
- QuotaВиджеты квот проекта — выпадающий QuotaWidget, аккордеон QuotaWidgetMini и карточка квоты QuotaWidgetCard с прогрессом и состояниями loading/error.
- WidgetКарточка продуктового виджета с кликабельным заголовком, SegmentControl, действиями и состояниями loading/error.
Overlays
1
Feedback
3
- ErrorPageПолноэкранная error-страница с типовыми сценариями ошибок, действиями и декоративной иллюстрацией.
- LoadStatusСтрока статуса загрузки с линейным progress bar, заголовком и подсказкой — по макету Figma loadStatus.
- NotificationПакет уведомлений — карточка NotificationCard, лента NotificationPanelContent со стеками и группами и адаптивная обёртка NotificationPanel (drawer на desktop, bottom-sheet на mobile).
Layout
3
- FlexКонтейнер для flex-раскладки: направление, выравнивание, перенос и отступы между детьми.
- LayoutБлоки-состояния продуктового экрана — заглушка пустого состояния EmptyBlock и экран ограниченного доступа NoAccess.
- PageLayoutНабор страничных раскладок продуктового кабинета — каталог, детальная страница сервиса, форма, дерево-навигация, сайдбар и общие слоты — с адаптацией desktop/mobile через AdaptiveProvider.
AI
10
Компоненты, специфичные для AI-сценариев: подсказки, превью генераций, агентные интерфейсы.
Surfaces
4
- AiCardSelectable AI-карточка с независимым boolean toggle, single-line заголовком и опциональным контентом.
- AiFieldBannerИнлайн-баннер для поля ввода с семантическим типом, иконкой, описанием и действием.
- AiFieldNoticeКомпозиция AiFieldBanner и AiQueue для контекстных уведомлений над AI-полем.
- AiSuggestionAI-подсказки — простой чип и раскрывающаяся группа с вложенными подсказками.
Process & motion
3
- AiChainOfThoughtsЦепочка рассуждений AI-агента (Chain of Thoughts) — сворачиваемый заголовок «Размышляю» с длительностью и список строк-инструментов.
- AiReasoningСтрока reasoning в AI-цепочке со степпер-линией, иконкой и текстовым описанием шага.
- AiShimmerАнимированный shimmer-блок для AI-сценариев с типографикой как в `@cloud-ru/ds-typography`.
Primitives
3
- AiButtonChevronКнопка-шеврон 16×16 для раскрытия и сворачивания в составных AI-компонентах стриминга.
- AiIconGigaИконка-логотип GigaChat в монохроме и брендовых градиентах для тёмного и светлого фона.
- AiToolБазовые презентационные элементы для сборки AI-компонентов Tool и Tool Simple — иконки, статус, текст, key-value, дерево, бейджи и блок деталей.
Site
1
Компоненты для публичных сайтов и порталов: карточки контента, лендинговые блоки, HR- и маркетинговые интерфейсы.
Patterns
5
Гайды и паттерны проектирования: как собирать сценарии из компонентов, контрибьютить, стандарты и процессы.