Компоненты
120+ компонентов дизайн-системы. Живые примеры и ссылки на Storybook.
Кнопки
Варианты
Размеры
Состояния
Открытый вопрос
Скругление кнопок: 8px (современный) или 0px (классический)? Какой стиль официальный?
Карточки
Default
Заголовок карточки
Описание карточки с дополнительной информацией о продукте или услуге.
НовинкаElevated
Заголовок карточки
Карточка с тенью для выделения важного контента на странице.
НовинкаOutlined
Заголовок карточки
Минимальная карточка с контурной рамкой и прозрачным фоном.
НовинкаФормы
Согласен с условиями
Уведомления
Открытый вопрос
Шрифт для форм: Roboto (текущий) или единый Gotham/Montserrat для всего?
Бейджи
DefaultPrimarySuccessError
Навигация
Breadcrumb
Главная>Продукты>Ceramic Pro 9H
Pagination
<12345>
Tabs
ОбзорХарактеристикиОтзывы
Обратная связь
iНовая версия покрытия Ceramic Pro 9H доступна для заказа.
✓Заявка успешно отправлена. Мы свяжемся с вами в ближайшее время.
✗Произошла ошибка при обработке запроса. Попробуйте позже.
Progress Bar
60% выполнено
Данные
| Продукт | Категория | Статус | Цена |
|---|---|---|---|
| Ceramic Pro 9H | Защита | В наличии | $1,500 |
| Ceramic Pro Light | Защита | Предзаказ | $800 |
| Ceramic Pro Sport | Быстрое покрытие | В наличии | $450 |
Все компоненты с интерактивными примерами
Открыть Storybook →Правила для каждого компонента
1forwardRef на всех компонентах2CSS-класс с префиксом cp- (cp-btn, cp-card)3CSS custom properties из @ceramic-pro/tokens с fallback4Все размеры кратны 8px (4px для мелких деталей)5WCAG 2.1 AA — контраст, keyboard nav, aria-атрибуты6Framer Motion и Three.js — optional peerDependencies7TypeScript strict — полные типы для всех props