Configuração Manual

Este guia orienta você na adição do AsterUI a um projeto React existente. AsterUI requer Tailwind CSS v4 e DaisyUI v5.

Pré-requisitos

Antes de começar, certifique-se de ter:

• Um projeto React (Vite recomendado)
• Node.js 18 ou superior

Instalação

1. Instale os pré-requisitos

   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. Configure o Vite

   Adicione o plugin Tailwind ao seu 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. Configure o CSS

   Adicione estas diretivas ao seu arquivo CSS (por exemplo, src/index.css):

   src/index.css

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

   A diretiva @source diz ao Tailwind para escanear AsterUI em busca de classes.

4. Instale o AsterUI

   npm

   npm install asterui

   pnpm

   pnpm add asterui

   yarn

   yarn add asterui

Verifique a Instalação

Crie um componente simples para verificar se tudo funciona:

import { Button, Space } from 'asterui'

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

Se você ver botões estilizados, está tudo pronto!