Instalación
Guía paso a paso para integrar el sistema de diseño en tu proyecto Astro.
✨ Instalación Rápida (Recomendada)
Usa la CLI interactiva para una configuración automática en segundos:
Proyecto nuevo desde cero
Crea un proyecto Astro con todo preconfigurado
npx @rubenvillar/design-system-astro createProyecto existente
Añade el design system a tu proyecto actual
npx @rubenvillar/design-system-astro initLa CLI te guiará interactivamente: selecciona componentes, elige modo oscuro y genera páginas de ejemplo automáticamente. Saber más →
1. Instalación Manual
Si prefieres instalar manualmente, añade la librería con tu gestor de paquetes preferido.
2. Configura Tailwind CSS v4
Para que los estilos se apliquen correctamente, añade el import de la librería en tu CSS principal.
src/styles/globals.css
@import "tailwindcss";
@import "@rubenvillar/design-system-astro/styles.css";3. Uso de componentes
¡Ya estás listo! Importa cualquier componente y empieza a construir tu interfaz.
index.astro
---
import { Button } from '@rubenvillar/design-system-astro';
---
<Button>Mi Botón</Button>¿Necesitas ayuda?
Consulta la documentación de la CLI para una instalación guiada, o revisa nuestro repositorio en GitHub.