Astro Rocket унаследовал полную библиотеку компонентов пользовательского интерфейса от Velocity от Southwell Media. Это означает, что 57 готовых к использованию компонентов доступны сразу после установки темы - никаких пакетов npm для установки, никакой дополнительной настройки. Каждый компонент уже стилизован с использованием цветовых токенов системы дизайна, поэтому они автоматически адаптируются при смене темы или включении темного режима.
Библиотека организована в три уровня: 33 примитива пользовательского интерфейса, которые образуют строительные блоки, 7 компонентов шаблонов более высокого уровня и набор компонентов структуры страницы для уровней «Герой», «Заголовок», «Нижний колонтитул», «Блог» и «SEO».
UI primitives
Эти 33 компонента охватывают все распространенные потребности пользовательского интерфейса. Они принимают варианты и размеры через свойства и разработаны с учетом доступности - навигация с помощью клавиатуры, атрибуты ARIA и управление фокусом обрабатываются автоматически.
Форма (7 компонентов)
Слой форм охватывает все стандартные типы ввода. Слой форм охватывает все стандартные типы ввода.
| Компонент | Как работает |
|---|---|
Кнопка | Основной интерактивный элемент. Поддерживает variant (brand, secondary, outline, ghost, destructive) и size (sm, md, lg). Работает как <button> или отображается как <a> при наличии href. |
Input | Однострочное текстовое поле ввода с поддержкой метки, вспомогательного текста и состояния ошибки.. |
Textarea | Многострочный текстовый ввод с тем же шаблоном метки/ошибки, что и в поле ввода. |
Select | Стилизованный стандартный элемент выбора с тем же шаблоном поля формы. |
Checkbox | Accessible checkbox with custom styling that follows the active theme. |
Radio | Переключатель с тем же оформлением, что и флажок. |
Switch | Переключатель для включения/выключения с плавным CSS-переходом. |
---
import Button from '@/components/ui/form/Button/Button.astro';
import Input from '@/components/ui/form/Input/Input.astro';
---
<Button variant="brand" size="md">Поехали</Button>
<Button variant="outline" size="md">Узнать больше</Button>
<Input label="Email address" type="email" placeholder="you@example.com" />Data display (9 components)
| Компонент | Как работает |
|---|---|
Card | Контейнер с рамкой и закругленными углами. Используйте его для любого сгруппированного блока контента.. |
Badge | Небольшая встроенная метка. Поддерживает свойства variant (brand, secondary, success, warning, destructive) и pill для округлого стиля.. |
Avatar | Круглое изображение или инициалы в качестве запасного варианта. |
AvatarGroup | Ряд аватаров, расположенных друг над другом, для списков команд или участников.. |
Table | Стилизованная HTML-таблица с поддержкой заголовка, основного содержимого и полосатых строк.. |
Pagination | Навигация по страницам с кнопками «Предыдущая/Следующая» и нумерацией страниц.. |
Progress | Горизонтальная полоса прогресса, заполняющаяся в процентах.. |
Skeleton | Заполнитель загрузки, который пульсирует, повторяя форму заменяемого им контента.. |
GoogleMap | Встраивает интерактивную карту Google через iframe. Принимает свойства address, zoom и size.. |
---
import Badge from '@/components/ui/data-display/Badge/Badge.astro';
import Card from '@/components/ui/data-display/Card/Card.astro';
---
<Badge variant="brand" pill>Новое</Badge>
<Badge variant="success">Активно</Badge>
<Card>
<p>Здесь любой контент.</p>
</Card>Feedback Обратная связь (3 components)
| Компонент | Как работает |
|---|---|
Alert | Встроенное сообщение для отображения состояния «информация», «успех», «предупреждение» или «ошибка».. |
Toast | Временное уведомление, которое появляется в углу экрана и автоматически закрывается.. |
Tooltip | Текстовая метка, которая появляется при наведении курсора или фокусировке на любой элемент.. |
Overlay перекрытие(6 components)
| Компонент | Как работает |
|---|---|
Accordion | Сворачиваемые панели контента - любое количество элементов, но одновременно открыт только один. |
Dialog | Модальное окно с фоном, блокировкой фокуса и закрытием с помощью клавиатуры.. |
Dropdown | Floating menu that opens below a trigger button. |
Tabs | Горизонтальная панель вкладок, позволяющая переключаться между панелями контента.. |
VerticalTabs | Аналогично вкладкам, но со списком вкладок слева. Удобно для панелей настроек.. |
ConsentBanner | Баннер согласия на использование файлов cookie с кнопками «Принять»/«Отклонить».. |
---
import Accordion from '@/components/ui/overlay/Accordion/Accordion.astro';
---
<Accordion items={[
{ title: 'Что такое Astro Rocket??', content: 'Готовая к использованию тема оформления для Astro 6..' },
{ title: 'Это шара?', content: 'Да. Имеет лицензию MIT.' },
]} />Layout & content (3 components)
| Компонент | Так работает |
|---|---|
Icon | Единый компонент иконок. Объединяет более 350 иконок Lucide UI и более 3000 иконок брендов Simple Icons через Iconify.. |
Separator | Горизонтальная или вертикальная разделительная линия. |
CodeBlock | Блок кода с синтаксисной подсветкой, кнопкой копирования и языковой меткой.. |
Компонент Icon используется во всей теме. Вы можете ссылаться на любой значок Lucide по имени, или на любой значок бренда Simple Icons по его сокращенному названию (например, github, x-twitter, instagram) или с полным префиксом simple-icons:.
---
import Icon from '@/components/ui/primitives/Icon/Icon.astro';
---
<Icon name="arrow-right" size="sm" />
<Icon name="github" size="md" />
<Icon name="simple-icons:vercel" size="md" />Marketing UI (5 components)
Это маркетинговые компоненты пользовательского интерфейса, отличающиеся от компонентов полнофункциональной целевой страницы, описанных ниже.
| Component | What it does |
|---|---|
CTA | Блок призыва к действию с заголовком, описанием и кнопкой. |
Logo | Автоматически генерируемый логотип-значок - первая буква названия вашего сайта на фоне активного фирменного цвета. Обновления в режиме реального времени при переключении темы. |
SocialProof | Описание проекта и краткое пояснение (например, «Присоединяйтесь к более чем 2000 разработчикам»). |
NpmCopyButton | Команда npm install в один клик с иконкой копирования - полезна для страниц проектов с открытым исходным кодом.. |
TerminalDemo | Анимированное окно терминала, отображающее последовательность команд.. |
Pattern components -Компоненты шаблона
Компоненты шаблонов позволяют комбинировать примитивы пользовательского интерфейса в конкретные сценарии использования в реальном мире. Они относятся к более высокому уровню и имеют более четкие требования.
| Component | What it does |
|---|---|
ContactForm | Полная форма обратной связи, интегрированная с Resend. Включает проверку Zod на стороне сервера и защиту от спама с помощью ловушек (honeypot). |
NewsletterForm | Форма для сбора адресов электронной почты, также подключенная к Resend. |
StatCard | Карточка для отображения метрик с крупным числом, подписью и дополнительным индикатором тренда. Используется на панели мониторинга или страницах с информацией о продукте. |
EmptyState | Заполнитель для пустых списков или результатов поиска (ноль результатов). Принимает значок, заголовок, описание и кнопку действия.. |
FormField | Общая метка + поле ввода + оболочка ошибки, используемая внутри всех компонентов формы. |
SearchInput | Введите текст с иконкой поиска и кнопкой очистки. |
PasswordInput | Поле ввода с возможностью отображения/скрытия пароля. |
Компоненты структуры страницы
Эти компоненты являются фиксированными частями архитектуры сайта. Они используются один раз для каждого типа страницы и, как правило, не комбинируются с другими компонентами - они определяют страницу.
Герой - компонент Hero поддерживает два макета (centered, split) и четыре размера (sm, md, lg, xl). Весь контент героя использует именованные слоты: badge, title, description, actions и, опционально, image.
Заголовок - фиксированная верхняя панель навигации с логотипом, навигационными ссылками, панелью выбора цветового режима (выпадающее меню «Система» / «Светлая» / «Темная»), панелью выбора цветовой темы (выбор из 12 образцов) и опциональной кнопкой призыва к действию (CTA). Три варианта отображения: solid, transparent и default. Капсульный заголовок на главной странице представляет собой отдельный параметр shape="floating" - отличный от варианта. Включает индикатор выполнения прокрутки, если он включен.
Нижний колонтитул - нижняя навигация со ссылками на сайт, иконками социальных сетей и текстом об авторских правах.
Хлебные крошки - автоматически генерируются из текущего URL-адреса. Используются в верхней части записей блога и внутренних страниц.
ThemeModeDropdown / ThemeSelectorDropdown - два выпадающих списка в форме таблеток, расположенные рядом в заголовке. ThemeModeDropdown - это трехпозиционный выбор цветового режима (Системный / Светлый / Темный), основанный на localStorage; ThemeSelectorDropdown - это выбор цветовой темы с 12 вариантами, основанный на sessionStorage. Оба выпадающих списка скрываются ниже контрольной точки md и перерисовываются внутри мобильного меню - выпадающий список цветового режима остается, а выбор цветовой темы становится плоским рядом вариантов ThemeSelector. Полный дизайн смотрите в статье о цветовом режиме.
Компоненты блога - BlogCard (карточка с обложкой, тегами и временем чтения), ArticleHero (заголовок статьи во всю ширину с обложкой и метаданными), RelatedPosts (раздел из трех карточек внизу каждой статьи), ShareButtons (Twitter/X, LinkedIn, текст из буфера обмена) и BlogImageSVG (SVG-фоны фирменных цветов для обложек статей).
Разделы целевой страницы - Credibility (панель с логотипом), FeatureTabs (интерактивная витрина функций с вкладками), LighthouseScores (анимированные шкалы оценок) и TechStack (полоса с технологическими значками).
SEO - SEO (все метатеги, Open Graph, Twitter Cards), JsonLd (структурированные данные для веб-сайта, организации, публикаций в блоге, хлебных крошек, часто задаваемых вопросов) и Analytics (слот для скрипта аналитики).
Всё соответствует активной теме.
Каждый компонент использует цветовые токены CSS системы дизайна - --color-brand-500, --color-foreground, --color-background и так далее. Переключитесь с изумрудного на фиолетовый, и все кнопки, значки, индикаторы выполнения и кольца фокусировки мгновенно обновятся. Ни один компонент не имеет жестко заданного фирменного цвета.
То же самое относится и к темному режиму: все значения токенов изменяются при переключении класса dark на <html>, и каждый компонент обновляется без дополнительного кода.
—
Добавление собственных компонентов
Если вам нужно что-то, чего нет в библиотеке, следуйте тем же шаблонам, что и в кодовой базе, чтобы создать новые компоненты, соответствующие существующей системе.
Куда поместить
Разместите новые компоненты в соответствующем подкаталоге в src/components/:
src/components/
├── ui/
│ ├── form/ # Button, Input, Select, Checkbox, Radio, Switch, Textarea
│ ├── data-display/ # Card, Badge, Avatar, AvatarGroup, GoogleMap, Table, Pagination, Progress, Skeleton
│ ├── feedback/ # Alert, Toast, Tooltip
│ ├── overlay/ # Dialog, Dropdown, Tabs, VerticalTabs, Accordion, ConsentBanner
│ ├── layout/ # Separator
│ ├── primitives/ # Icon
│ ├── content/ # CodeBlock
│ └── marketing/ # Logo, CTA, NpmCopyButton, SocialProof, TerminalDemo
├── patterns/ # Composed patterns (ContactForm, SearchInput, etc.)
├── layout/ # Page structure (Header, Footer)
├── blog/ # Blog-specific
└── landing/ # Marketing pagesБазовая структура компонента
Типичный компонент пользовательского интерфейса определяет свои свойства в метаданных, сопоставляет варианты со строками классов и использует class:list для составления окончательного класса:`:
---
interface Props {
variant?: 'default' | 'primary' | 'success';
size?: 'sm' | 'md';
class?: string;
}
const {
variant = 'default',
size = 'md',
class: className = '',
} = Astro.props;
const variants = {
default: 'bg-background-secondary text-foreground',
primary: 'bg-primary text-primary-foreground',
success: 'bg-success-light text-success-foreground',
};
const sizes = {
sm: 'px-2 py-0.5 text-xs',
md: 'px-3 py-1 text-sm',
};
---
<span
class:list={[
'inline-flex items-center rounded-full font-medium',
variants[variant],
sizes[size],
className,
]}
>
<slot />
</span>Три правила, которым следует следовать
Используйте токены дизайна, а не жестко заданные значения. Каждый встроенный компонент использует bg-background, text-foreground, border-border и токены бренда. Если вы жестко зададите bg-white или text-gray-900, ваш компонент сломается в темном режиме и проигнорирует активную цветовую тему.
Поддерживайте именованные слоты для гибкого контента. Слоты позволяют пользователю передавать значки, действия или контент нижнего колонтитула без необходимости сообщать о них компоненту:
<FeatureCard title="Fast">
<Icon name="zap" slot="icon" />
Lightning быстрая сборка.
<Button slot="footer">Узнай еще...</Button>
</FeatureCard>Используйте React для интерактивности. Компоненты Astro отрисовываются на сервере и не имеют состояния на стороне клиента. Для всего, что требует useState, onClick или обновлений в реальном времени, создайте файл .tsx и используйте директиву client:visible при его подключении:
---
import { Counter } from '@/components/ui';
---
<Counter client:visible />Просмотрите демонстрацию в реальном времени
Самый быстрый способ ознакомиться со всеми 57 компонентами - это демонстрация компонентов в реальном времени. Каждый компонент отображается с возможностью просмотра свойств в реальном времени:
Эта демонстрация встроена в сам Astro Rocket. Все 57 компонентов отображаются там - та же разметка, те же варианты, те же свойства, которые вы будете использовать в своем собственном проекте.