Installation manuelle

Ce guide vous accompagne dans l’ajout d’AsterUI à un projet React existant. AsterUI nécessite Tailwind CSS v4 et DaisyUI v5.

Prérequis

Avant de commencer, assurez-vous d’avoir :

• Un projet React (Vite recommandé)
• Node.js 18 ou supérieur

Installation

1. Installer les prérequis

   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. Configurer Vite

   Ajoutez le plugin Tailwind à votre 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. Configurer le CSS

   Ajoutez ces directives à votre fichier CSS (par ex., src/index.css) :

   src/index.css

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

   La directive @source indique à Tailwind de scanner AsterUI pour les classes.

4. Installer AsterUI

   npm

   npm install asterui

   pnpm

   pnpm add asterui

   yarn

   yarn add asterui

Vérifier l’installation

Créez un composant simple pour vérifier que tout fonctionne :

import { Button, Space } from 'asterui'

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

Si vous voyez des boutons stylisés, vous êtes prêt !