1. Instalar la librería Lity UI

Puedes instalar la librería directamente desde el repositorio oficial de GitHub:

npm install github:Andresdev22-web/lity-ui

* Si usas pnpm: pnpm add github:Andresdev22-web/lity-ui

2. Instalar Dependencias (Tailwind v4 & Iconos)

Para garantizar el funcionamiento de las clases utilitarias y la iconografía, instala Tailwind v4, su plugin de Vite y la integración de iconos:

npm install tailwindcss @tailwindcss/vite astro-icon @iconify-json/lucide

* Si usas pnpm: pnpm add tailwindcss @tailwindcss/vite astro-icon @iconify-json/lucide

3. Configurar astro.config.mjs

Añade las integraciones necesarias en el archivo de configuración global de Astro:

import { defineConfig } from 'astro/config';
import tailwindcss from '@tailwindcss/vite';
import icon from 'astro-icon';

export default defineConfig({
  integrations: [
    icon() // Permite renderizar iconos SVG
  ],
  vite: {
    plugins: [tailwindcss()], // Soporte para Tailwind CSS v4
  },
});

4. Importar y Usar Componentes

Puedes importar componentes directamente desde el punto de entrada centralizado de 'lity-ui':

---
import Layout from '../layouts/Layout.astro';
import { HelloWorld, Button, Card } from 'lity-ui';
---

<Layout title="Página Principal - Lity UI">
  <main class="min-h-screen flex items-center justify-center">
    <HelloWorld title="¡Bienvenido a mi web creada con Lity UI!" />
  </main>
</Layout>