Большое обновление: 32 новых компонента, интерфейс от края до края и 225+ бесплатных блоков Astro

Новый этап AstroComponents.dev

Рады представить одно из самых значимых обновлений AstroComponents.dev с момента запуска!

В этом релизе библиотека пополнилась 32 новыми готовыми к продакшену компонентами Astro во всех категориях. Кроме того, мы перевели документацию на плавный интерфейс от края до края: боковая панель прижата к левому краю экрана, а холст для живого тестирования компонентов стал просторнее.

Создаёте ли вы SaaS-лендинги, аналитические дашборды, интерактивную документацию или портфолио — новые компоненты работают без runtime-зависимостей, соответствуют строгим требованиям доступности (WCAG AA) и сохраняют фирменную тёмную glassmorphism-эстетику.

---

Что нового в этом релизе?

Полный список 32 новых компонентов по категориям со ссылками на интерактивную документацию и исходный код:

🔘 Кнопки

Интерактивные кнопки для микровзаимодействий, конверсии и тактильного отклика:

• Ripple Button — эффект нажатия в стиле Material: волны расходятся точно из точки клика.
• Neon Border Button — CTA в стиле киберпанк с вращающейся конической неоновой рамкой и мягким свечением.
• Slide Reveal Button — кнопка с двумя состояниями: при наведении подпись сдвигается и открывает иконку или текст подтверждения.

📝 Формы и поля ввода

Поля и элементы управления для высокой конверсии со встроенными стилями валидации:

• Password Strength Input — оценка надёжности пароля в реальном времени с цветной сегментной шкалой и кнопкой показа.
• Tags Autocomplete Input — редактор тегов с созданием с клавиатуры, удалением чипов и автодополнением.
• Glass Inline Toggle Group — сегментированный переключатель в стиле macOS с анимированным стеклянным индикатором и навигацией с клавиатуры.
• Phone Country Input — международное поле телефона с выбором кода страны и атрибутами доступности.

🃏 Карточки

Контейнеры для тарифов SaaS, open-source репозиториев и KPI:

• Pricing Compare Mini Card — карточка тарифа с подсветкой, списком возможностей и кнопками действий.
• GitHub Repo Card — карточка репозитория GitHub с языком, звёздами, форками и статистикой.
• Stats Trend Card — KPI-карточка со значением, индикатором роста или падения и мини-столбцами.

🔔 Обратная связь и уведомления

Аккуратные индикаторы состояния и элементы отклика:

• Progress Ring Counter — круговой SVG-индикатор с анимацией обводки и процентом в центре.
• Toast Notification Group — стопка уведомлений об успехе, предупреждении, ошибке и информации с действиями.

🧭 Навигация

Док-панели, индикаторы шагов и подменю дашбордов:

• Sub Navbar Pills — вторичная навигация-«таблетки» с подсветкой активного пункта и счётчиками.
• Quick Jump Dock — плавающий док в стиле macOS, увеличивающийся при наведении, с иконками и горячими клавишами.
• Step Breadcrumb Bar — индикатор пошагового мастера с пройденными, текущими и будущими этапами.

📐 Макет и структура

Основы на CSS Grid и эстетичные переходы:

• Holy Grail Grid — 5-зонный макет на CSS Grid с липкой шапкой, сворачиваемыми боковыми панелями, контентом и подвалом.
• Diagonal Section Divider — наклонный SVG-разделитель для непрямоугольных переходов между секциями.

🪟 Оверлеи и диалоги

Панели согласия, сравнение изображений и мини-опросы:

• Cookie Preferences Drawer — нижняя панель по GDPR/CCPA с переключателями категорий: необходимые, аналитика, маркетинг.
• Image Compare Slider — интерактивное сравнение «до и после» с перетаскиваемым разделителем и поддержкой касаний.
• Floating Feedback Widget — кнопка в углу с оценкой эмодзи и полем для отзыва.

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

Журналы аудита, таймлайны в стиле GitHub и строки показателей:

• Metric Comparison Row — горизонтальное сравнение факта и цели с индикаторами прогресса.
• Activity Heatmap Grid — сетка активности в стиле GitHub по неделям и месяцам.
• Status Timeline Feed — журнал инцидентов и аудита со статусами, аватарами и временем.

✍️ Типографика и текстовые эффекты

Динамические заголовки, бегущие строки и кибер-типографика:

• Animated Counter Text — счётчик, плавно растущий от нуля при появлении на экране.
• Gradient Text Marquee — бесконечная бегущая строка с металлическим градиентом.
• Curved Path Heading — круговой SVG-заголовок по траектории для бейджей, печатей и художественных hero.
• Hacker Decode Text — анимация «расшифровки» в стиле Матрицы, которая превращается в текст при прокрутке или наведении.

📈 Графики и визуализация

SVG-графики без зависимостей для аналитики:

• Radar Metric Chart — многоосевая радарная диаграмма для оценок аудита (скорость, SEO, доступность, безопасность).
• Linear Progress Gauge — многосегментный индикатор квоты с цветными порогами и показателем заполненности.

🚀 Готовые секции лендингов

Полноширинные секции для высокой конверсии, готовые для любой страницы:

• Testimonial Grid Section — блок социальных доказательств в стиле бенто с бейджами, цитатами с аватарами и рейтингом.
• Logo Cloud Section — лента логотипов партнёров и клиентов с подсветкой при наведении и бесконечной прокруткой.
• Hero Showcase Split — двухколоночный hero со светящимся заголовком, основным и дополнительным CTA и живыми карточками превью.

---

Полное обновление интерфейса: макет от края до края

Помимо новых компонентов, мы переработали весь интерфейс документации:

1. Боковая панель у края: навигация закреплена у левого края экрана (x = 0), и на широких мониторах (1440p, 4K, ультраширокие) больше нет пустых чёрных полей.
2. Плавный холст: страницы документации масштабируются до 1440px, а секции — до 1600px, давая реалистичные превью сложных макетов, сеток и дашбордов.
3. Умное оглавление справа: панель «На этой странице» находится на правом поле и уступает всю ширину основному холсту на экранах меньше 1200px.

---

Быстрый пример: используем новые компоненты

Подключить любой из этих компонентов к проекту Astro можно за секунды:

---
import { PasswordStrengthInput } from 'astro-component-kit/forms';
import { StatsTrendCard } from 'astro-component-kit/cards';
import { QuickJumpDock } from 'astro-component-kit/navigation';
---

<!-- Карточка метрики аналитики -->
<StatsTrendCard 
  label="Активные пользователи в месяц" 
  value="48 290" 
  change="+18,4%" 
  trend="up" 
/>

<!-- Защищённое поле формы -->
<PasswordStrengthInput 
  id="signup-password" 
  label="Придумайте пароль" 
  required 
/>

<!-- Плавающий док навигации -->
<QuickJumpDock />

---

Что дальше?

Сейчас мы работаем над:

• Интерактивными секциями калькулятора ROI и цен.
• Новыми фонами на шейдерах Three.js.
• Новыми пресетами цветовых тем и токенами для Figma.

Поставьте звезду нашему репозиторию на GitHub, чтобы следить за проектом, сообщать о проблемах или предлагать новые компоненты!

Создано на Astro 5 • Ноль runtime-зависимостей • Чистый CSS