AstroComponents.dev — бесплатный UI-кит для Astro в постоянном развитии
Знакомьтесь: AstroComponents.dev — UI-кит с открытым кодом и более чем 200 бесплатными компонентами Astro, секциями и glassmorphism-элементами для современных веб-приложений.
Представляем AstroComponents.dev
AstroComponents.dev — это UI-кит для Astro с открытым исходным кодом для разработчиков, которые хотят выпускать красивые и доступные интерфейсы, не создавая каждый компонент с нуля.
Проект начинался как личный и сейчас активно развивается: каждую неделю в библиотеку добавляются новые компоненты, улучшения и оптимизации.
Что это такое?
AstroComponents.dev — это большая коллекция из более чем 200 бесплатных компонентов Astro в единой тёмной glassmorphism-эстетике. Это ваша основная библиотека компонентов Astro для:
- Лендингов — hero-секции, сетки возможностей, таблицы тарифов
- Дашбордов — карточки, графики, отображение данных, боковые панели
- Форм — поля ввода, списки, загрузка файлов, валидация
- Навигации — навбары, вкладки, хлебные крошки, выдвижные панели
- Оверлеев — модальные окна, тосты, поповеры, баннеры cookie
Каждый компонент работает без runtime-зависимостей (чистый Astro + CSS), доступен (WCAG AA) и адаптивен по умолчанию.
Секции: готовые шаблоны страниц
Одна из главных особенностей этой коллекции бесплатных компонентов Astro — категория «Секции». Вместо того чтобы собирать страницу из отдельных деталей, вы получаете готовые блоки страниц, которые работают сразу:
- Hero Gradient — полноэкранный hero с анимированным градиентным фоном
- Hero Split — контент и визуальный макет рядом
- Hero Glass — центрированный hero со стеклянным слоем
Каждая секция готова к копированию и полностью адаптивна. Никакой настройки — просто импортируйте и используйте.
Почему AstroComponents.dev?
| Возможность | Подробности |
|---|---|
| Ноль зависимостей | Чистый Astro + CSS. Без React и Tailwind |
| 200+ компонентов | Кнопки, карточки, формы, навбары, оверлеи, графики и многое другое |
| Доступность | Семантический HTML, ARIA-атрибуты, навигация с клавиатуры |
| Сначала тёмная тема | Создано для тёмных фонов с эффектами glassmorphism |
| Лицензия MIT | Бесплатно навсегда — для личных и коммерческих проектов |
| Tree-shaking | Импортируйте только нужное по категориям |
Быстрый старт
npm install astro-component-kit---
import { GlassButton } from 'astro-component-kit/buttons';
import { GlassCard } from 'astro-component-kit/cards';
import { GlassNavbar } from 'astro-component-kit/navigation';
---
<GlassNavbar brand="MyApp" brandHref="/">
<div slot="actions">
<GlassButton>Начать</GlassButton>
</div>
</GlassNavbar>Вот и всё. Никакой настройки, конфигурационных файлов и дополнительных шагов сборки сверх того, что уже даёт Astro.
Что дальше
Проект активно развивается. Вот что в планах:
- Больше шаблонов секций — тарифы, FAQ, отзывы, команды
- Компоненты графиков — на базе интеграции с ApexCharts
- 3D-компоненты — фоны-галактики и слои текста на Three.js
- Оптимизация производительности — меньше бандлы, быстрее сборка
- Улучшение документации — таблицы пропсов, справочник API, примеры
Каждый вклад и каждый отзыв помогают определить развитие библиотеки. Если вы работаете с Astro и ищете бесплатный UI-кит для Astro, который просто работает, — это он.
Для кого это?
- Независимые разработчики, которым нужна библиотека компонентов без лишней настройки
- Агентства, создающие сайты клиентов на Astro и ищущие готовые к продакшену блоки
- Дизайнеры, прототипирующие в Astro и нуждающиеся в аккуратных доступных компонентах
- Все, кто ищет бесплатные компоненты Astro премиального качества
Ссылки
- Компоненты: astrocomponents.dev/ru/docs/glass-button
- Секции: astrocomponents.dev/ru/sections
- Установка: astrocomponents.dev/ru/install
- GitHub: github.com/konstantinWDK/astro-components
AstroComponents.dev — создавайте быстрее, выпускайте красиво.