Wishzy - Learning Management System

Giới Thiệu

shadcn/ui là một bộ sưu tập các component có thể tái sử dụng được xây dựng bằng Radix UI và Tailwind CSS. Khác với các thư viện component truyền thống, shadcn/ui không phải là một package npm mà bạn cài đặt. Thay vào đó, bạn sao chép và dán code vào dự án của mình.

Tại Sao Chọn shadcn/ui?

Có nhiều lý do để chọn shadcn/ui cho dự án Next.js của bạn:

Tùy chỉnh hoàn toàn: Bạn sở hữu code, có thể chỉnh sửa tùy ý
Accessible: Được xây dựng trên Radix UI với hỗ trợ accessibility tốt
Styling linh hoạt: Sử dụng Tailwind CSS để styling dễ dàng
TypeScript: Hỗ trợ TypeScript đầy đủ

Cài Đặt

Để bắt đầu với shadcn/ui, bạn cần cài đặt các dependencies cần thiết:

npx shadcn-ui@latest init

Lệnh này sẽ thiết lập cấu hình cần thiết và tạo file components.json.

Thêm Component

Sau khi cài đặt, bạn có thể thêm các component vào dự án:

npx shadcn-ui@latest add button

Component sẽ được thêm vào thư mục components/ui của bạn.

Tùy Chỉnh Theme

shadcn/ui sử dụng CSS variables để quản lý theme. Bạn có thể tùy chỉnh màu sắc trong file globals.css:

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
}

Kết Luận