Tái sử dụng component với Shadcn/ui trong React, Nextjs

Nếu anh em đã từng trải qua nhiều dự án khác nhau chắc hẳn mỗi dự án sẽ đều có cũng bộ common component dùng chung khác nhau cho từng dự án. Việc tạo ra các component này cũng khá là mất thời gian để customize nó sao cho phù hợp với từng dự án. Shadcn/UI cho phép chúng ta tạo ra các component common rất nhanh bằng cách copy các component mình cần từ trang chủ của nó tại đây Accordion - shadcn/ui hoặc có thể dùng CLI để cài đặt. Nó rất dễ sử dụng anh em có thể tìm và đọc documents của nó để hiểu rõ hơn, còn bài viết này mình sẽ chủ yếu nói về các ưu và nhược điểm của nó.

Ưu điểm:

1. Trước hết Shadcn/UI không phải là một thư viện UI mà thực chất tác giả chỉ build lại các component dựa trên các thư viện khác Tailwind CSS và Radix UI sao cho nó dễ reuse và có thể customize nhất có thể. Mà nếu anh em làm các dự án cá nhân vọc vách mà không có design thì dùng default UI của nó cũng đã khá là đẹp mắt dễ chịu rồi.
2. Dễ dàng cài đặt: Anh em có thể copy trực tiếp component về dự án dùng luôn hoặc có thể dùng CLI để cài đặt các component.
3. Hỗ trợ dark/light theme
4. Tích hợp được với nhiều UI framework quen thuộc như: React/Nextjs, Remix, Vite, Astro, Gatsby,...
5. Làm việc với form dễ dàng: Các component để anh em làm form được dùng từ react hook form + zod để validate rất là ngon nghẻ
6. Có rất nhiều components: Nó có đầy đủ hầu hết các component mà anh em cần luôn, nào là Toast, Table, Tooltip, Skeleton,...
7. Là một open source đang được gần 26k start trên github và vẫn đang được phát triển bởi cộng đồng.
8. Có hẳn file figma design các component cho anh em xem: https://www.figma.com/community/file/1203061493325953101

Nhược điểm:

1. Custom theme: Dù shadcn/ui có cung cấp doc cho anh em customize theme nhưng màu sắc của các component được viết dạng HSL nên khá khó đọc và nhận dạng màu.
2. Vẫn còn khá nhiều Issue: Tại thời điểm hiện tại trên github đang có 350 issues đang open, như vậy là vẫn còn khá nhiều vấn đề và lỗi trong quá trình sử dụng do vậy vẫn phải cần 1 thời gian nữa để hoàn thiện hơn.

Tóm lại:

Mình cũng chỉ mới sử dụng Shadcn/ui trong 1 dự án nên cũng chưa thể đánh giá hết những ưu và nhược điểm của nó. Tuy nhiên theo cá nhân mình thấy thì đây là một open source khá là hay và tiện. Ưu điểm thì rất là nhiều, anh em có thể dùng nó để tự build các component common reuseable phù hợp với dự án mà không mất quá nhiều thời gian để build base component. Đó cũng là lý do vì sao hôm nay mình giới thiệu nó để chia sẻ với mọi người.

Hy vọng nó sẽ giúp ích cho anh em code năng suất và hiệu quả hơn nhé !