Руководство по установке
Добавьте более 320 бесплатных и доступных UI-компонентов и шаблонов в ваш проект Astro менее чем за 2 минуты. Без лишних зависимостей. Лицензия MIT — бесплатно навсегда.
Шаг 1
Требования
Вам потребуется проект Astro (v5.0+). Если его еще нет, создайте новый:
bash
# 1. Create a new Astro project
npm create astro@latest my-project
# 2. Navigate into the project
cd my-project
# 3. Install the component library
npm install astro-component-kit
# 4. Start the dev server
npm run dev Требуется Node.js 22.12+. Проверьте командой
node --version.
Шаг 2
Установка библиотеки
Выберите удобный пакетный менеджер:
bash
npm install astro-component-kit bash
yarn add astro-component-kit bash
pnpm add astro-component-kitШаг 3 Опционально
Установка дополнительных зависимостей
Большинство компонентов работают с 0 зависимостей. Только для графиков или 3D установите:
Charts
ApexCharts (Area, Bar, Donut)
bash
# Only if you need chart components
npm install apexcharts3D
Three.js (Galaxy3D, AnimatedGalaxy)
bash
# Only if you need 3D components
npm install threeШаг 4
Импорт и использование компонентов
Доступны два стиля импорта — корневой или по категориям (рекомендуется для минимального бандла):
Вариант А: Корневой импорт (быстро)
astro
---
// Import all components
import { GlassButton, GlassCard, GlassNavbar, AnimatedInput } from 'astro-component-kit';
---
<GlassButton>Click me</GlassButton>
<GlassCard title="Welcome">Content</GlassCard>Вариант Б: Импорт по категориям (рекомендуется)
astro
---
// Import by category (recommended for smaller bundles)
import { GlassButton, GlowButton } from 'astro-component-kit/buttons';
import { GlassCard, ProfileCard } from 'astro-component-kit/cards';
import { AnimatedInput, OTPInput } from 'astro-component-kit/forms';
import { GlassAlert, Badge } from 'astro-component-kit/feedback';
import { GlassNavbar } from 'astro-component-kit/navigation';
import { GlassModal } from 'astro-component-kit/overlays';
import { MasonryGrid } from 'astro-component-kit/layout';
import { GradientHeading } from 'astro-component-kit/typography';
---Импорт дизайн-токенов
Предоставляет единую палитру цветов, сетку отступов, шрифты и радиусы скругления.
astro
---
// Import global design tokens (optional but recommended)
import 'astro-component-kit/global.css';
---Быстрая справка
| Задача | Команда / Импорт |
|---|---|
| Установка библиотеки | npm install astro-component-kit |
| Поддержка графиков | npm install apexcharts |
| Поддержка 3D | npm install three |
| Импорт глобальных токенов | import 'astro-component-kit/global.css' |
| Все компоненты | Компоненты → |
| Все секции | Секции → |
Готовы к разработке?
Изучите каталог компонентов и используйте их в своих проектах прямо сейчас.