Các công cụ Vibe Code

Component Library: Build Once, Use Everywhere

Bolt.new cho phép bạn tạo components nhanh chóng. Bài học này dạy cách build reusable UI kit có hệ thống.

Component Categories

Prompt Cho UI Kit Structure:

Tạo UI kit với các categories:

1. Primitives (atoms):
   - Button (primary, secondary, ghost, destructive)
   - Input (text, email, password, textarea)
   - Badge, Tag
   - Avatar, Icon

2. Compositions (molecules):
   - InputField (label + input + helper text)
   - Card (header, body, footer)
   - Alert, Toast
   - Dropdown, Select

3. Patterns (organisms):
   - Header, Navbar
   - Sidebar, Footer
   - Modal, Dialog
   - Table, DataGrid

Button Variants

Complete Button System:

Button component với Bolt.new:

Variants:
- primary: bg-emerald-600 text-white
- secondary: bg-white border border-slate-300
- ghost: bg-transparent hover:bg-slate-100
- destructive: bg-red-600 text-white

Sizes:
- sm: h-8 px-3 text-sm
- md: h-10 px-4 text-sm
- lg: h-12 px-6 text-base

States: default, hover, active, disabled, loading

Props: variant, size, leftIcon, rightIcon, loading, disabled

Card Components

Card component system:

Base Card:
- bg-white rounded-xl border border-slate-200
- hover: shadow-md transition
- padding: p-6

Variants:
- CardSimple: chỉ content
- CardWithHeader: header + divider + body
- CardInteractive: clickable, hover state đầy đủ
- CardStats: number lớn + label nhỏ

Sub-components:
- CardHeader, CardTitle, CardDescription
- CardContent, CardFooter

Form Components

Form component library:

InputField:
- Label: text-sm font-medium text-slate-700
- Input: h-10 border rounded-lg
- Helper: text-sm text-slate-500
- Error: text-sm text-red-600

Select:
- Custom dropdown với Radix UI
- Search filter cho long lists
- Multi-select variant

Checkbox, Radio:
- Custom styled (không dùng native)
- Group component cho multiple options

Component Documentation

Prompt Cho Docs:

Generate documentation cho Button component:

## Button

Primary action component.

### Usage
import { Button } from '@/components/ui/button';

<Button variant="primary" size="md">
  Click me
</Button>

### Props
| Prop | Type | Default |
|------|------|---------|
| variant | primary, secondary, ghost | primary |
| size | sm, md, lg | md |
| disabled | boolean | false |
| loading | boolean | false |

### Examples
[Show all variant combinations]

Storybook Integration

Setup Storybook cho UI kit:

Stories cho mỗi component:
- Default state
- All variants
- All sizes
- Interactive states
- Edge cases (long text, loading)

Controls:
- Toggle props dynamically
- View responsive behavior

Consistency Checklist

🔥 Pro Tip: Sau khi build xong UI kit, hãy prompt: "Review tất cả components cho consistency về sizing, spacing, và colors."