React UI component library with DaisyUI
npm install asteruiA comprehensive React component library built with DaisyUI and Tailwind CSS.
View the documentation at: https://asterui.com
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@latestor
pnpm create asterui@latestor
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
To add AsterUI to an existing project, you'll need Tailwind CSS v4 and DaisyUI v5.
`bash`
npm install asterui
npm install -D tailwindcss @tailwindcss/vite daisyui
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()],
})
`
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.
`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 (
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' },
]}
>
Forgot password?
Don't have an account? Sign up
)
}
`
90+ components including forms, data display, navigation, feedback, and layout. See the full list at asterui.com/components.
Some components require additional peer dependencies and use separate imports:
`bashFor Chart component
npm install apexcharts
import { Chart } from 'asterui/chart'
- React 18 or 19
- Tailwind CSS 4+
- DaisyUI 5+
ISC