Getting Started

AsterUI is a React component library built on DaisyUI and Tailwind CSS v4. It provides beautifully styled, accessible components with built-in theming support.

Quick Start

1. Create a new project

   Create a new AsterUI project by running the following command in your terminal:

   npm

   npm create asterui@latest

   pnpm

   pnpm create asterui@latest

   yarn

   yarn create asterui@latest

   Follow the prompts to name your project and select a template.

2. Start the development server

   Navigate to your project directory and start the dev server:

   npm

   cd my-asterui-app
   npm run dev

   pnpm

   cd my-asterui-app
   pnpm dev

   yarn

   cd my-asterui-app
   yarn dev

   You’ll see a confirmation message in your terminal with a link to your local preview.

3. Start building

   Open the project in your editor and start using AsterUI components:

   src/App.tsx

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

Tip

AsterUI is built on DaisyUI which provides 30+ themes out of the box. Try changing themes by adding data-theme="dark" or data-theme="cupcake" to your HTML element.

Next Steps

• Add to an existing project: Follow the Manual Setup guide to add AsterUI to an existing React project.

Troubleshooting

If you run into issues, check the following:

• Ensure you have Node.js 18 or higher installed
• Make sure Tailwind CSS v4 and DaisyUI v5 are properly configured
• Check that your CSS file includes the required directives

For more help, visit the GitHub repository.