Fastry наследует полную библиотеку UI-компонентов от Velocity от Southwell Media. Это означает, что 57 готовых к использованию компонентов доступны сразу после установки темы — никаких npm-пакетов для установки, никакой дополнительной настройки.
UI примитивы (33 компонента)
Формы (7 компонентов)
| Компонент | Что делает |
|---|---|
Button | Основной интерактивный элемент. Поддерживает варианты (brand, secondary, outline, ghost, destructive) и размеры (sm, md, lg). |
Input | Однострочное текстовое поле с поддержкой метки, вспомогательного текста и состояния ошибки. |
Textarea | Многострочное текстовое поле. |
Select | Стилизованный нативный выпадающий список. |
Checkbox | Доступный флажок с кастомной стилизацией. |
Radio | Радиокнопка с такой же темизацией. |
Switch | Переключатель вкл/выкл с плавным CSS-переходом. |
Отображение данных (9 компонентов)
| Компонент | Что делает |
|---|---|
Card | Контейнер с рамкой и скруглёнными углами. |
Badge | Маленькая встроенная метка. |
Avatar | Круглое изображение или инициалы. |
AvatarGroup | Ряд аватаров для команд. |
Table | Стилизованная HTML-таблица. |
Pagination | Навигация по страницам. |
Progress | Горизонтальный индикатор прогресса. |
Skeleton | Заполнитель загрузки в форме контента. |
GoogleMap | Встраивает интерактивную карту Google. |
Обратная связь (3 компонента)
Alert — встроенное сообщение, Toast — временное уведомление, Tooltip — всплывающая подсказка.
Оверлей (6 компонентов)
Accordion, Dialog, Dropdown, Tabs, VerticalTabs, ConsentBanner.
Макет и контент (3 компонента)
Icon — унифицированный компонент иконок (350+ Lucide UI и 3000+ Simple Icons через Iconify). Separator — разделитель. CodeBlock — блок кода с подсветкой синтаксиса.
Маркетинговый UI (5 компонентов)
CTA, Logo, SocialProof, NpmCopyButton, TerminalDemo.
Паттерн-компоненты
ContactForm, NewsletterForm, StatCard, EmptyState, FormField, SearchInput, PasswordInput.
Компоненты структуры страниц
Hero — два макета (centered, split) и четыре размера (sm, md, lg, xl).
Header — фиксированная верхняя панель навигации с логотипом, ссылками, переключателем темы и CTA-кнопкой.
Footer — нижняя навигация с ссылками, соц-иконками и копирайтом.
Всё реагирует на активную тему
Каждый компонент использует CSS-токены цветов дизайн-системы — --color-brand-500, --color-foreground, --color-background. Переключитесь с Emerald на Purple, и каждая кнопка, бейдж и индикатор обновятся мгновенно.
Просмотр живого демо
Самый быстрый способ оценить все 57 компонентов — /components.