AsterUI

A comprehensive React component library built with DaisyUI and Tailwind CSS.

Demo

View the documentation at: https://asterui.com

Quick Start

The fastest way to get started is with create-asterui, which sets up a new project with Vite, Tailwind CSS v4, DaisyUI v5, and AsterUI pre-configured:

``bash
npm create asterui@latest


or

pnpm create asterui@latest

or

yarn create asterui
`

The CLI will guide you through interactive prompts to configure:
- Language - TypeScript (recommended) or JavaScript
- Themes - Light/Dark, Business/Corporate, all themes, or custom selection
- Package manager - npm, pnpm, or yarn (auto-detected)
- Optional components - Chart, QRCode, VirtualList (adds required peer dependencies)

Then start the dev server:

`bash
cd my-app
npm run dev
`

Manual Installation

To add AsterUI to an existing project, you'll need Tailwind CSS v4 and DaisyUI v5.

$3

`bash
npm install asterui
npm install -D tailwindcss @tailwindcss/vite daisyui
`

$3

Add the Tailwind plugin to your vite.config.ts:

`ts
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
plugins: [react(), tailwindcss()],
})
`

$3

Update your CSS file (e.g., src/index.css):

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

The @source directive tells Tailwind to scan the AsterUI package for classes to include in your build.

Usage

`tsx
import { Form, Input, Checkbox, Button, Modal, Card, Space, Flex, Typography } from 'asterui'

const { Link, Paragraph } = Typography

export default function App() {
const handleSubmit = (values: { email: string; password: string; remember: boolean }) => {
Modal.success({
title: 'Login Successful',
content:

{JSON.stringify(values, null, 2)}

,
})
}

return (

name="password"
label="Password"
rules={[
{ required: true },
{ min: 8, message: 'Password must be at least 8 characters' },
{ pattern: /[A-Z]/, message: 'Must contain an uppercase letter' },
{ pattern: /[a-z]/, message: 'Must contain a lowercase letter' },
{ pattern: /[0-9]/, message: 'Must contain a number' },
{ pattern: /[!@#$%^&*.?]/, message: 'Must contain a special character' },
]}
>




Remember me

Forgot password?


Sign In

or

Don't have an account? Sign up




)
}

`

Components

90+ components including forms, data display, navigation, feedback, and layout. See the full list at asterui.com/components.

Optional Components

Some components require additional peer dependencies and use separate imports:

`bash


For Chart component

npm install apexcharts
import { Chart } from 'asterui/chart'

For QRCode component

npm install qrcode
import { QRCode } from 'asterui/qrcode'

For VirtualList component

npm install @tanstack/react-virtual
import { VirtualList } from 'asterui/virtuallist'
``

Requirements

- React 18 or 19
- Tailwind CSS 4+
- DaisyUI 5+

License

ISC