Documents
Chào mừng đến với Quản lý tài chính cá nhân
Buttons (shadcn/ui)
Button component với nhiều variants và sizes khác nhau
Variants:
Sizes:
States:
Dark Mode (next-themes)
Theme switcher với light/dark mode. Tự động phát hiện system preference và lưu vào localStorage.
Click icon để chuyển đổi giữa light và dark mode
Form Validation (React Hook Form + Zod)
Form với validation type-safe sử dụng React Hook Form và Zod schema. Form tự động validate khi blur và hiển thị error messages.
💡 Tip: Thử nhập tên ngắn hơn 2 ký tự hoặc email không hợp lệ để xem validation
Typography
Font system sử dụng Geist Sans và Geist Mono từ Vercel
Heading 1
Heading 2
Heading 3
Heading 4
Body text - Đây là đoạn văn bản thông thường với font Geist Sans.
Small text - Text phụ với màu muted
const code = "Geist Mono";Colors (CSS Variables)
Color system sử dụng CSS variables, tự động adapt với dark mode
Background
Foreground
Primary
Secondary
Muted
Accent
Card
Destructive