1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Primeros Pasos

Guía de Instalación

Añade más de 320 componentes UI gratuitos, accesibles y plantillas a tu proyecto Astro en menos de 2 minutos. Cero dependencias en tiempo de ejecución. Licencia MIT — libre para siempre.

Paso 1

Requisitos Previos

Necesitas un proyecto existente de Astro (v5.0+). Si aún no tienes uno, créalo fácilmente:

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
# 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
Se requiere Node.js 22.12+. Compruébalo con node --version.
Paso 2

Instalar la librería

Elige tu gestor de paquetes favorito:

bash 
npm install astro-component-kit
npm install astro-component-kit
bash 
yarn add astro-component-kit
yarn add astro-component-kit
bash 
pnpm add astro-component-kit
pnpm add astro-component-kit
Paso 3 Opcional

Instalar dependencias opcionales (peer dependencies)

La gran mayoría de componentes funcionan con 0 dependencias. Solo si usas gráficos o 3D instala:

Charts

ApexCharts (Area, Bar, Donut)

bash 
# Only if you need chart components
npm install apexcharts
# Only if you need chart components npm install apexcharts

3D

Three.js (Galaxy3D, AnimatedGalaxy)

bash 
# Only if you need 3D components
npm install three
# Only if you need 3D components npm install three
Paso 4

Importar y usar componentes

Puedes importar todo desde la raíz o importar por categorías (recomendado para un menor bundle):

Opción A: Importación raíz (simple)

astro 
---
// Import all components
import { GlassButton, GlassCard, GlassNavbar, AnimatedInput } from 'astro-component-kit';
---

<GlassButton>Click me</GlassButton>
<GlassCard title="Welcome">Content</GlassCard>
--- // Import all components import { GlassButton, GlassCard, GlassNavbar, AnimatedInput } from 'astro-component-kit'; --- <GlassButton>Click me</GlassButton> <GlassCard title="Welcome">Content</GlassCard>

Opción B: Importación por categoría (recomendado)

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';
---
--- // 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'; ---

Importar tokens de diseño globales

Te da acceso a la paleta de colores unificada, escala de espaciado, tipografía y radios de borde.

astro 
---
// Import global design tokens (optional but recommended)
import 'astro-component-kit/global.css';
---
--- // Import global design tokens (optional but recommended) import 'astro-component-kit/global.css'; ---

Referencia rápida

Tarea Comando / Import
Instalar librería npm install astro-component-kit
Soporte de gráficos npm install apexcharts
Soporte 3D npm install three
Importar tokens globales import 'astro-component-kit/global.css'
Ver componentes Componentes →
Ver secciones Secciones →

¿Listo para construir?

Explora toda la biblioteca de componentes y empieza a copiarlos en tu proyecto.

Explorar Componentes Ver Secciones