A 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:
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)
You can also pass arguments directly:
npm create asterui@latest my-app npm create asterui@latest my-app --js # Use JavaScript instead of TypeScript npm create asterui@latest my-app --themes all # Include all DaisyUI themes
Then start the dev server:
cd my-app
npm run devTo add AsterUI to an existing project, you'll need Tailwind CSS v4 and DaisyUI v5.
npm install asterui npm install -D tailwindcss @tailwindcss/vite daisyui
Add the Tailwind plugin to your vite.config.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):
@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.
import { Form, Input, Checkbox, Button, Modal, Card, Flex, Space, Divider, 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: <pre className="text-left">{JSON.stringify(values, null, 2)}</pre>, }) } return ( <Flex justify="center" align="center" minHeight="screen" className="bg-base-200 p-4"> <Card title="Sign In" className="w-full max-w-sm"> <Form onFinish={handleSubmit} initialValues={{ remember: false }}> <Form.Item name="email" label="Email" rules={[{ required: true }, { type: 'email' }]}> <Input className="w-full" placeholder="you@example.com" /> </Form.Item> <Form.Item 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' }, ]} > <Input className="w-full" type="password" placeholder="Enter your password" /> </Form.Item> <Space justify="between" align="center" className="mb-4"> <Form.Item name="remember" valuePropName="checked" inline> <Checkbox>Remember me</Checkbox> </Form.Item> <Link size="sm">Forgot password?</Link> </Space> <Button color="primary" htmlType="submit" shape="block"> Sign In </Button> <Divider>or</Divider> <Paragraph align="center" size="sm"> Don't have an account? <Link>Sign up</Link> </Paragraph> </Form> </Card> </Flex> ) }
105 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:
# 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' # For CodeEditor component npm install @codemirror/autocomplete @codemirror/commands @codemirror/language @codemirror/lint @codemirror/search @codemirror/state @codemirror/view @codemirror/lang-javascript @codemirror/lang-python @codemirror/lang-html @codemirror/lang-css @codemirror/lang-json @codemirror/lang-markdown @codemirror/lang-sql @codemirror/lang-xml import { CodeEditor } from 'asterui/codeeditor'
This is a pnpm monorepo with the following packages:
packages/asterui- The component library (105 components)packages/create-asterui- Project scaffolding CLIpackages/docs- Documentation website (asterui.com)packages/examples- Example apps for testing components
# Enable corepack (if not already enabled) corepack enable # Install dependencies pnpm install # Start documentation site pnpm dev # Build all packages pnpm build
cd packages/asterui
pnpm publishISC