Skip to content
50+ готовых компонентов

Библиотека компонентов

Готовые к использованию UI-примитивы, созданные с заботой о доступности и производительности. Копируйте, вставляйте и настраивайте под свой бренд.

Просмотреть компоненты Исходный код

Герой

Гибкие hero-секции с несколькими макетами, фонами и слотами для инъекции контента.

Разделенный макет Две колонки со слотом aside
Новый релиз

Стройте быстрее с Fastry

Современный стартовый набор для production-сайтов.

Доверяют разработчики

Слот для дополнительного контента

Центрированный макет Одна колонка, выравнивание по центру
О нас

У нас есть миссия

Создаём инструменты, которыми разработчики любят пользоваться. Наша команда стремится создавать исключительные решения.

Stack Marquee Two rows of stack cards scrolling opposite ways — driven by src/content/stack, themed for light & dark
Astro
Tailwind CSS
TypeScript
React
Фон второго уровня

Фон второго уровня

Лёгкое возвышение над фоном по умолчанию.

Градиентный фон

Градиентный фон

Эффект плавного градиентного перехода.

Инвертированный фон Всегда тёмный, независимо от темы

Тёмная тема всегда

Идеально подходит для CTA и секций, которые должны выделяться.

Присоединяйтесь к тысячам пользователей

Вариации размеров параметры отступа sm, md, lg, xl
size="sm"
Компактный отступ
size="md"
Отступ по умолчанию
size="lg"
Большой отступ
size="xl"
Очень большой отступ
Доступные параметры Упрощённый API (композиция прежде всего)

Параметры

  • layout centered | split
  • size sm | md | lg | xl
  • showGrid boolean

Слоты

  • badge Используйте компонент Badge
  • title Используйте h1/h2 напрямую
  • description Используйте p напрямую
  • actions Кнопки призыва к действию
  • aside Боковой контент (только для split)

Фоны: Используйте CSS-классы для пользовательских фонов (например, class="bg-surface-invert")

Макет

Компоненты шапки и подвала для единообразной структуры страницы. Варианты с полной кастомизацией через дизайн-токены.

Макет по умолчанию Логотип слева, навигация + действия справа
Минимальный макет Логотип + CTA, без навигации
Только навигация Без CTA, без действий, только навигация
Варианты размеров sm (48px), md (56px), lg (64px)
size="sm" h-12 (48px) — компактный
size="md" h-14 (56px) — по умолчанию
size="lg" h-16 (64px) — просторный
Варианты фона default, solid, transparent
variant="default" — размытие фона + прозрачность
variant="solid" — непрозрачный фон
variant="transparent" — светлый фон, тёмный текст
variant="transparent" colorScheme="invert" — для тёмных фонов
Параметры шапки Полный API

Макет и позиция

  • layout default | centered | minimal
  • position fixed | sticky | static
  • size sm | md | lg
  • variant default | solid | transparent
  • colorScheme default | invert

Навигация

  • nav NavItem[] (заменяет стандартные маршруты)
  • extraNav NavItem[] (добавляет к маршрутам)
  • showActiveState boolean
  • showMobileMenu boolean

Действия

  • showCta boolean
  • cta { label, href }
  • actions HeaderAction[]
  • showThemeToggle boolean
Подвал — простой макет Одна строка с логотипом, навигацией и опциональными соцсетями
Минимальный макет Только копирайт — идеально для простых сайтов

Fastry © 2026

Вертикальный макет Вертикальное выравнивание по центру — отлично для лендингов
Многоколоночный макет Несколько колонок с группами ссылок
Параметры подвала Полный API

Макет

  • layout simple | columns | minimal | stacked
  • columns 2 | 3 | 4
  • background default | secondary | invert

Содержимое

  • nav NavItem[]
  • linkGroups FooterLinkGroup[]
  • socialLinks SocialLink[]
  • tagline string

Копирайт и юридическое

  • showCopyright boolean
  • copyright string (поддерживает {year}, {siteName})
  • legalLinks LegalLink[]
Токены оформления навигации Кастомизация через CSS-переменные

/* Настройка состояний ссылок навигации в global.css */

--nav-link-color: var(--foreground-muted);

--nav-link-hover-color: var(--foreground);

--nav-link-hover-bg: var(--secondary);

--nav-link-active-color: var(--foreground);

--nav-link-active-bg: var(--secondary);

--nav-link-active-font-weight: 600;

CTA — вариант по умолчанию Светлый фон с заголовком, описанием и кнопками действий

Хватит настраивать. Начните строить.

Присоединяйтесь к разработчикам, которые создают быстрые и качественные сайты с Fastry.

CTA — инвертированный вариант Тёмный фон с инвертированной цветовой схемой

Готовы к созданию?

Это лишь начало. Клонируйте Fastry и начните выпускать продукты быстрее.

CTA — вариации размеров параметры отступа sm, md, lg, xl

/* Варианты размера управляют вертикальными отступами */

sm: 'py-16 md:py-20'

md: 'py-20 md:py-24'

lg: 'py-24 md:py-32' (по умолчанию)

xl: 'py-32 md:py-40'

/* Варианты MaxWidth управляют шириной контента */

sm: 'max-w-xl' | md: 'max-w-2xl' | lg: 'max-w-3xl' | xl: 'max-w-4xl'

Кнопки

Интерактивные элементы для действий и навигации. Все варианты поддерживают иконки, состояния загрузки и полную доступность.

Варианты 6 стилей для разных контекстов
Размеры Адаптивное масштабирование
Состояния
С иконками

Поля формы

Текстовые поля, селекты, чекбоксы и другие. Встроенная валидация и поддержка ARIA.

Текстовое поле С метками и валидацией

Не менее 8 символов

Поле с иконками Иконки слева и справа
Текстовая область Многострочный ввод

Поддерживается markdown

Выпадающий список Нативный селект
Чекбоксы Кастомизированные элементы управления
Радиокнопки Выбор одного варианта
Выбор тарифа Радиокнопки в стиле карточек
Переключатель Включение/выключение состояний

Получать оповещения о важных обновлениях по email

Получать новости о продукте и анонсы функций

Получать текстовые сообщения о критических событиях

Размеры и состояния переключателя sm, md, lg + отключённый

Обратная связь

Бейджи, алерты и индикаторы состояния для передачи информации и направления действий пользователя.

Бейджи Индикаторы состояния
По умолчанию Успешно Внимание Информация
Алерты Контекстные сообщения
Toast-уведомления Нажмите кнопки, чтобы вызвать уведомления

Перекрытия

Диалоги, выпадающие меню, подсказки и вкладки. Полная навигация с клавиатуры и управление фокусом.

Диалог Модальное окно
Выпадающее меню Меню действий
Подсказки Контекстные подсказки
Подсказка сверху Подсказка снизу Подсказка слева Подсказка справа
Вкладки Организация контента

Обзор проекта с ключевыми метриками и недавней активностью. Вкладки поддерживают полную навигацию с клавиатуры.

Аналитические данные с графиками и аналитикой производительности. Используйте стрелки для переключения между вкладками.

Настройте параметры вашего проекта. Используйте Home/End для перехода к первой/последней вкладке.

Отображение данных

Карточки, аватары и иконки для представления контента и информации о пользователе.

Варианты карточек 5 визуальных стилей

По умолчанию

Стандартная карточка с рамкой

Сплошная

Заполненный фон

Контурная

Толстая рамка, без заливки

Прозрачная

Прозрачный контейнер

С тенью

С глубиной тени

Карточки с иконками Комбинируйте иконку, заголовок и описание

Производительность

100/100 Lighthouse

Ноль JavaScript по умолчанию. Архитектура островов с выборочной гидратацией для максимальной скорости.

Безопасность типов

Полный TypeScript

Строгая типизация с автодополнением в IDE и проверкой ошибок на этапе компиляции.

Готовность к i18n

Многоязычность

Встроенная система переводов с SEO-дружественными URL и автоматическим определением локали.

Простые карточки Только заголовок и описание

Начало работы

Краткое руководство по запуску вашего проекта за несколько минут.

Документация

Полный справочник API и примеры использования.

Сообщество

Присоединяйтесь к нашему Discord-серверу и общайтесь с другими разработчиками.

Пользовательские макеты Статистика, профили, действия

Общая выручка

$45,231

+12.5% по сравнению с прошлым месяцем

Сара Чен Сара Чен

Сара Чен

Продуктовый дизайнер

Pro Сан-Франциско, Калифорния

astro-rocket-app

Продакшн деплой

В работе
Аватары Представление пользователей
Джон Доу
xs
Джейн Смит
sm
Алекс Джонсон
md
Сэм Уилсон
lg
Крис Ли
xl
Пользователь 1 Пользователь 1
Пользователь 2 Пользователь 2
Пользователь 3 Пользователь 3
+5
Стопкой
Иконки Набор Lucide — 24 включено
menu
x
chevron-down
arrow-right
search
plus
check
mail
phone
github
twitter
linkedin
sun
moon
zap
globe
shield
code
heart
star
alert-circle
check-circle
info
loader
Разделитель Горизонтальный, вертикальный и с подписями

Горизонтальный (по умолчанию)

С подписью

С текстом подписи

Вертикальный (в flex-контейнере)

Элемент 1 Элемент 2 Элемент 3
Таблица Стилизованная таблица с наведением и чередованием строк
Имя Email Роль Статус
Сара Чен sarah@example.com Администратор Активен
Алекс Джонсон alex@example.com Редактор Активен
Сэм Уилсон sam@example.com Наблюдатель Неактивен
Таблица с чередованием строк и компактная Чередование строк с уменьшенными отступами
ID Продукт Цена Остаток
001 Fastry Pro $49 120
002 Fastry Team $99 85
003 Fastry Enterprise $249 42
004 Fastry Starter Бесплатно ∞
Группа аватаров Стопка аватаров с переполнением

max=4, 6 аватаров

Пользователь 1 Пользователь 1
Пользователь 2 Пользователь 2
Пользователь 3 Пользователь 3
Пользователь 4 Пользователь 4
+2

size="xs"

Пользователь 1 Пользователь 1
Пользователь 2 Пользователь 2
Пользователь 3 Пользователь 3
+1

size="sm"

Пользователь 1 Пользователь 1
Пользователь 2 Пользователь 2
Пользователь 3 Пользователь 3
+1

size="md"

Пользователь 1 Пользователь 1
Пользователь 2 Пользователь 2
Пользователь 3 Пользователь 3
+1

size="lg"

Пользователь 1 Пользователь 1
Пользователь 2 Пользователь 2
Пользователь 3 Пользователь 3
+1

Загрузка

Скелетные загрузчики для повышения воспринимаемой производительности во время получения контента.

Типы скелетонов Текст, круг, прямоугольник
Скелетон карточки Составное состояние загрузки
Индикатор прогресса Детерминированные индикаторы прогресса

25% — по умолчанию

60% — брендовый

90% — успех

Цветовые варианты Все 5 на 70%
Варианты размеров sm, md, lg + неопределённый

size="sm"

size="md"

size="lg"

Неопределённый

Переключатели

Аккордеон и расширяемые паттерны контента на основе нативных HTML details/summary.

Аккордеон — по умолчанию Сворачиваемые секции FAQ
Что такое Fastry?
Fastry — современный стартовый шаблон Astro с Tailwind CSS v4, React-островами и обширной библиотекой компонентов. Включает всё необходимое для создания production-сайтов.
Он бесплатен?
Да! Fastry имеет открытый исходный код и полностью бесплатен. Вы можете использовать его в личных и коммерческих проектах без ограничений.
Как кастомизировать тему?
Fastry использует CSS-переменные (дизайн-токены) для тем. Отредактируйте файлы токенов в src/styles/tokens/, чтобы настроить цвета, отступы, типографику и многое другое.
Вариант карточки Один элемент открыт по умолчанию
Начало работы
Выполните команду CLI для создания нового проекта. Настройте с помощью флагов --demo, --components и --i18n.
Деплой
Разверните на Vercel, Netlify или любом другом хостинге статики. Результат сборки оптимизирован для производительности из коробки.
Поддержка
Присоединяйтесь к обсуждениям на GitHub или сообщайте об ошибках и запросах функций.
Эксклюзивный режим Только один элемент открыт одновременно
Бесплатный тариф
Идеально подходит для личных проектов и обучения. Включает все основные компоненты и базовые шаблоны.
Pro тариф
Продвинутые компоненты, премиум-шаблоны, приоритетная поддержка и коммерческая лицензия.
Enterprise
Индивидуальная разработка, выделенная поддержка, гарантии SLA и обучение команды.

Паттерны

Предварительно собранные паттерны компонентов для типовых UI-задач — поиск, пароли, статистика и пустые состояния.

Поле поиска Поле ввода с иконкой поиска, несколько размеров
Поле пароля С переключением видимости

Не менее 8 символов

Размеры поля пароля sm, md, lg
Карточки статистики Отображение метрик с индикаторами тренда

Общая выручка

$45,231

+12.5% по сравнению с прошлым месяцем

Активные пользователи

2,338

+8.2% по сравнению с прошлой неделей

Показатель отказов

24.3%

-3.1% по сравнению с прошлым месяцем

Средняя сессия

3м 42с

Без изменений
Пустое состояние Заполнитель для пустых представлений данных

Нет сообщений

Когда вы получите сообщения, они появятся здесь. Начните разговор, чтобы начать.

Новое сообщение

Ничего не найдено

Попробуйте изменить поисковый запрос или фильтры.

Готовы к созданию?

Это лишь начало. Клонируйте Fastry и начните выпускать продукты быстрее.

Клонировать репозиторий Читать документацию