HuynhCo-UI Component Library

Thư viện UI component hiện đại được xây dựng với React, Vite, RadixUI và Tailwind CSS.

✨ Tính năng

• 🎨 Tailwind CSS - Styling mạnh mẽ và linh hoạt
• 🧩 RadixUI - Components headless, accessible và customizable
• ⚡ Vite - Build tool nhanh và hiện đại
• 📚 Storybook - Component documentation và development
• 🔷 TypeScript - Type safety đầy đủ
• 🎭 Class Variance Authority - Variant API cho components

🚀 Bắt đầu

Cài đặt Dependencies

npm install
# hoặc
yarn install
# hoặc
pnpm install

Development

Chạy demo application:

npm run dev

Chạy Storybook:

npm run storybook

Build

Build library:

npm run build

Build Storybook:

npm run build-storybook

📦 Components

Button

Component button với nhiều variants và sizes.

Variants:

• default - Primary button
• secondary - Secondary button
• destructive - Destructive action
• outline - Outline style
• ghost - Ghost style
• link - Link style

Sizes:

• default - Default size
• sm - Small
• lg - Large
• icon - Icon button

Ví dụ:

import { Button } from 'huynhco-ui'

<Button>Click me</Button>
<Button variant="outline">Outline</Button>
<Button size="sm">Small Button</Button>

Card

Container component linh hoạt với header, content và footer.

Components:

• Card - Main container
• CardHeader - Header section
• CardTitle - Title
• CardDescription - Description
• CardContent - Main content
• CardFooter - Footer section

Ví dụ:

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from 'huynhco-ui'

<Card>
  <CardHeader>
    <CardTitle>Card Title</CardTitle>
    <CardDescription>Card Description</CardDescription>
  </CardHeader>
  <CardContent>
    <p>Card content</p>
  </CardContent>
  <CardFooter>
    <Button>Action</Button>
  </CardFooter>
</Card>

Input

Text input component với support cho nhiều types.

Ví dụ:

import { Input } from 'huynhco-ui'

<Input type="email" placeholder="Email" />
<Input type="password" placeholder="Password" />
<Input disabled placeholder="Disabled" />

Dialog

Modal dialog component được xây dựng trên RadixUI Dialog.

Components:

• Dialog - Root component
• DialogTrigger - Trigger button
• DialogContent - Content container
• DialogHeader - Header section
• DialogTitle - Title
• DialogDescription - Description
• DialogFooter - Footer section
• DialogClose - Close button

Ví dụ:

import { Dialog, DialogTrigger, DialogContent, DialogHeader, DialogTitle, DialogDescription, DialogFooter } from 'huynhco-ui'

<Dialog>
  <DialogTrigger asChild>
    <Button>Open Dialog</Button>
  </DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Dialog Title</DialogTitle>
      <DialogDescription>Dialog description</DialogDescription>
    </DialogHeader>
    <div>Dialog content</div>
    <DialogFooter>
      <Button>Action</Button>
    </DialogFooter>
  </DialogContent>
</Dialog>

🎨 Styling

Thư viện sử dụng Tailwind CSS với custom design tokens. Bạn có thể customize colors và theme trong file tailwind.config.js.

CSS Variables

Thư viện sử dụng CSS variables cho theming. Xem src/styles/globals.css để xem các variables có sẵn.

Utility Function

cn() - Helper function để merge class names:

import { cn } from 'huynhco-ui'

<div className={cn('base-class', condition && 'conditional-class')} />

📖 Documentation

Xem Storybook để có documentation đầy đủ và interactive examples:

npm run storybook

🛠️ Development

Project Structure

HC-UI/
├── src/
│   ├── components/
│   │   ├── Button/
│   │   ├── Card/
│   │   ├── Dialog/
│   │   └── Input/
│   ├── lib/
│   │   └── utils.ts
│   ├── styles/
│   │   └── globals.css
│   ├── demo/
│   │   ├── App.tsx
│   │   └── main.tsx
│   └── index.ts
├── .storybook/
├── vite.config.ts
├── tailwind.config.js
└── tsconfig.json

Adding New Components

1. Tạo folder mới trong src/components/
2. Tạo component file (e.g., ComponentName.tsx)
3. Tạo index file để export
4. Tạo stories file (e.g., ComponentName.stories.tsx)
5. Export component trong src/index.ts

📄 License

MIT

🤝 Contributing

Contributions, issues và feature requests được chào đón!