57 компонентов. - strelchenko blog

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 компонентами - это демонстрация компонентов в реальном времени. Каждый компонент отображается с возможностью просмотра свойств в реальном времени:

/components

Эта демонстрация встроена в сам Astro Rocket. Все 57 компонентов отображаются там - та же разметка, те же варианты, те же свойства, которые вы будете использовать в своем собственном проекте.