Manual Setup

This guide walks you through adding AsterUI to an existing React project. AsterUI requires Tailwind CSS v4 and DaisyUI v5.

Prerequisites

Before you begin, make sure you have:

• A React project (Vite recommended)
• Node.js 18 or higher

Installation

1. Install prerequisites

   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 Vite

   Add the Tailwind plugin to your 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 CSS

   Add these directives to your CSS file (e.g., src/index.css):

   src/index.css

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

   The @source directive tells Tailwind to scan AsterUI’s compiled output for class names. The path must point to asterui/dist (where the components live) and is relative to the CSS file, not the project root. For example, if your CSS file is at src/index.css, then ../node_modules/asterui/dist resolves correctly. If it’s nested deeper (e.g., src/styles/index.css), adjust the path accordingly (e.g., ../../node_modules/asterui/dist).

4. Install AsterUI

   npm

   npm install asterui

   pnpm

   pnpm add asterui

   yarn

   yarn add asterui

Verify Installation

Create a simple component to verify everything works:

import { Button, Space } from 'asterui'

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

If you see styled buttons, you’re all set!