shadcn

Tổng quan

shadcn là gì?

shadcn là bộ công cụ để quản lý, tạo thành phần và tùy chỉnh các thành phần UI React được thiết kế với Tailwind CSS. Nó giúp các nhà phát triển và nhà thiết kế thêm các phần tử UI chất lượng cao, có thể tái sử dụng trực tiếp vào dự án, hỗ trợ phát triển giao diện nhanh chóng và hệ thống thiết kế đồng nhất.

shadcn dành cho ai?

shadcn được thiết kế cho các nhà phát triển frontend, kỹ sư UI và các nhóm xây dựng ứng dụng React muốn:

• Thêm và tùy chỉnh thành phần UI nhanh chóng
• Duy trì sự nhất quán về mặt hình ảnh với Tailwind CSS
• Mở rộng hoặc kết hợp các thành phần theo nhu cầu dự án
• Tránh phải tự tạo lại các mẫu UI phổ biến

shadcn giải quyết vấn đề gì?

• Đơn giản hóa việc thêm và cập nhật thành phần UI dưới dạng mã nguồn
• Cung cấp danh mục thành phần và preset có thể tìm kiếm
• Đưa ra tài liệu rõ ràng và ví dụ sử dụng cho từng thành phần
• Hỗ trợ cấu hình dự án qua file components.json

Cách sử dụng

Các bước cài đặt

1. Thêm shadcn vào dự án:
   Sử dụng trình quản lý gói bạn ưa thích. Ví dụ với npm:

   npx shadcn@latest init
   

   Hoặc với pnpm:

   pnpm dlx shadcn@latest init
   

   Hoặc với bun:

   bunx --bun shadcn@latest init
   

2. Cấu hình dự án:
   Làm theo hướng dẫn trên CLI để thiết lập dự án và tạo file components.json.
3. Thêm thành phần:
   Tìm kiếm và thêm thành phần từ danh mục:

   npx shadcn@latest add button
   

   Thay button bằng tên thành phần bạn muốn.
4. Tùy chỉnh và kết hợp:
   • Sử dụng các biến thể và kích thước có sẵn để tạo kiểu nhanh.
   • Kết hợp các thành phần (ví dụ: Tabs + Card + Form) cho bố cục phức tạp.
   • Mở rộng hoặc tạo kiểu thành phần bằng Tailwind CSS theo nhu cầu.

Cấu trúc và file dự án

• components.json: Theo dõi các thành phần đã cài và cấu hình.
• Mã nguồn của từng thành phần được thêm trực tiếp vào dự án, cho phép tùy chỉnh toàn diện.

Tài liệu và ví dụ

• Xem tài liệu và ví dụ sử dụng cho bất kỳ thành phần nào:

  npx shadcn@latest docs <component>
  

• Tham khảo thêm tại kho shadcn/ui trên GitHub.

Câu hỏi thường gặp

Khi nào nên dùng shadcn?

Dùng shadcn khi bạn cần nhanh chóng tạo khung, tùy chỉnh hoặc mở rộng các thành phần UI trong dự án React, đặc biệt nếu bạn sử dụng Tailwind CSS và ưu tiên các thành phần có mã nguồn dễ chỉnh sửa.

Những dự án nào không phù hợp với shadcn?

shadcn không phù hợp với các dự án không dùng React, hoặc nếu bạn cần thư viện thành phần được quản lý hoàn toàn mà không tích hợp mã nguồn. Nó cũng không dành cho công việc backend hoặc không liên quan đến UI.

Làm sao để cập nhật hoặc gỡ bỏ thành phần?

• Cập nhật: Chạy lại lệnh add để lấy phiên bản mới nhất.
• Gỡ bỏ: Xóa file thành phần khỏi dự án và cập nhật lại components.json.

Tôi có thể tìm hỗ trợ ở đâu?

• Xem tài liệu tại shadcn/ui trên GitHub
• Sử dụng trợ giúp CLI: npx shadcn@latest --help

Để xem cấu trúc file đầy đủ và cách sử dụng nâng cao, hãy khám phá kho lưu trữ hoặc mở tab Files trong thư mục kỹ năng của bạn.