Configuración Manual

Esta guía te explica cómo agregar AsterUI a un proyecto React existente. AsterUI requiere Tailwind CSS v4 y DaisyUI v5.

Requisitos Previos

Antes de comenzar, asegúrate de tener:

• Un proyecto React (se recomienda Vite)
• Node.js 18 o superior

Instalación

1. Instala los requisitos previos

   npm

   npm install -D tailwindcss @tailwindcss/vite daisyui

   pnpm

   pnpm add -D tailwindcss @tailwindcss/vite daisyui

   yarn

   yarn add -D tailwindcss @tailwindcss/vite daisyui

2. Configura Vite

   Agrega el plugin de Tailwind a tu vite.config.ts:

   vite.config.ts

   import { defineConfig } from 'vite'
   import react from '@vitejs/plugin-react'
   import tailwindcss from '@tailwindcss/vite'
   
   export default defineConfig({
     plugins: [react(), tailwindcss()],
   })

3. Configura CSS

   Agrega estas directivas a tu archivo CSS (por ejemplo, src/index.css):

   src/index.css

   @import "tailwindcss";
   @plugin "daisyui";
   @source "../node_modules/asterui";

   La directiva @source le indica a Tailwind que escanee AsterUI en busca de clases.

4. Instala AsterUI

   npm

   npm install asterui

   pnpm

   pnpm add asterui

   yarn

   yarn add asterui

Verificar la Instalación

Crea un componente simple para verificar que todo funcione:

import { Button, Space } from 'asterui'

function App() {
  return (
    <Space>
      <Button>Default</Button>
      <Button color="primary">Primary</Button>
      <Button color="secondary">Secondary</Button>
    </Space>
  )
}

Si ves los botones con estilo, ¡estás listo!