Shadcn: Xây dựng component library dễ dàng chỉ với thao tác copy-paste

Sự xuất hiện của khái niệm 'headless' đã trở thành một xu hướng nổi bật trong thời đại phát triển phần mềm hiện nay. Khi các ứng dụng ngày càng phức tạp, yêu cầu về tính linh hoạt, khả năng quản lý, kiểm soát và chỉnh sửa trở nên vô cùng quan trọng. Trong thiết kế hệ thống, kiến trúc headless phân tách giao diện người dùng (FE) khỏi logic vận hành ở phía sau (BE), nhằm tăng cường sự linh hoạt và khả năng mở rộng khi cần tối ưu.

Triết lý headless này cũng được áp dụng trong thiết kế các component cho giao diện người dùng, và gần đây, nó đã nhanh chóng trở nên phổ biến trong cộng đồng UI developers. Các thư viện UI truyền thống như Material UI thường giúp lập trình viên tạo nhanh component để sử dụng ngay, nhưng khi phần mềm mở rộng, các trường hợp sử dụng (use case) mới sẽ phát sinh. Điều này đòi hỏi khả năng tùy chỉnh cao, một yếu tố mà nhiều thư viện truyền thống khó đáp ứng đầy đủ.

Đó là lý do các thư viện headless như Radix ra đời, chỉ cung cấp chức năng và hành vi (logic và behavior) của component mà không định nghĩa sẵn bất kỳ kiểu dáng (styling) nào. Tuy nhiên, việc xây dựng giao diện hoàn chỉnh cho các thành phần headless có thể trở nên phức tạp hơn.

Sự xuất hiện của Shadcn

Với những hạn chế kể trên, Shadcn - một thư viện mới ra mắt vào năm 2023 đã xuất hiện để giải quyết các điểm khó khăn này, bằng cách cung cấp sẵn các component được styling với nhiều kiểu mẫu cùng các theme màu khác nhau. Nhờ đó, người dùng sử dụng ngay các component, nhưng vẫn có khả năng tùy chỉnh linh hoạt khi cần thiết.

Shadcn đã nhanh chóng thu hút sự chú ý của cộng đồng lập trình viên và trở thành xu hướng chỉ sau thời gian ngắn. Trong vòng một năm, repository của Shadcn đã nhận được khoảng 40K stars, sau 19 tháng đã đạt gần 70K stars. Ban đầu, Shadcn được phát triển dành riêng cho cộng đồng React, nhưng sau đó đã nhanh chóng được mở rộng và xuất hiện ở các framework khác như Vue và Svelte.

So với những thư viện truyền thống như Material UI, Shadcn có điểm khác biệt nào, những lợi ích và giá trị mang lại cho cho developer ra sao?

Shadcn là gì?

Lần đầu nghe đến Shadcn, mình nghĩ rằng đây chỉ là một thư viện UI với các tính năng nổi bật hơn so với những thư viện khác. Tuy nhiên, điều bất ngờ là Shadcn còn không được xem là một thư viện hay framework UI. Trên trang chủ của Shadcn cũng xác nhận điều này:

"This is NOT a component library. It's a collection of re-usable components that you can copy and paste into your apps."

Thực chất, Shadcn là một tập gồm các thành phần UI (component) có thể tái sử dụng (re-usable components) như Button, Modal, Dropdown, ... Việc cài đặt và sử dụng các component này không được thực hiện qua NPM mà thông qua việc copy và paste mã nguồn của các component cần thiết vào dự án của mình. Ngoài ra, chúng ta cũng có thể sử dụng CLI để thêm component một cách thuận tiện hơn.

Shadcn được xây dựng dựa trên thư viện Radix và framework Tailwind CSS. Bằng cách sử dụng Radix, một thư viện headless tập trung vào khả năng truy cập (accessibility) và tùy chỉnh (customization), kết hợp với việc cung cấp sẵn các kiểu dáng (styling) cho các component, Shadcn cho phép các lập trình viên linh hoạt lựa chọn thiết kế có sẵn hoặc tùy chỉnh các thành phần theo yêu cầu của từng dự án.

Tính năng của Shadcn

Shadcn cung cấp một số tính năng nhằm tăng tốc độ và cải thiện trải nghiệm của lập trình viên trong quá trình thiết kế hệ thống. Cụ thể bao gồm:

• CLI: Hỗ trợ cài đặt các component nhanh chóng
• Theme & Colors: Cung cấp nhiều chủ đề (theme) với màu sắc hài hòa, kèm theo tùy chỉnh cấu hình cho từng theme
• Components, Blocks & Charts: Bộ sưu tập các thành phần, khối và biểu đồ sẵn có để sử dụng trong thiết kế

CLI

Như mình đã đề cập ở phần giới thiệu, có hai cách để sử dụng mã nguồn của các component, đó là copy & paste thủ công hoặc sử dụng CLI để Shadcn tự động tải component ta cần vào thư mục của dự án.

Thao tác cài đặt shadcn CLI vô cùng đơn giản chỉ với một dòng lệnh:

npx shadcn@latest init

Lưu ý: Một số framework được hỗ trợ có thể cần thêm một vài thao tác phía trước. Tham khảo thêm tại đây.

Tiếp theo, hệ thống sẽ hỏi một vài câu hỏi để cấu hình components.json.

1. Which style would you like to use? › New York
2. Which color would you like to use as base color? › Zinc
3. Do you want to use CSS variables for colors? › no / yes

Sau khi đã trả lời những câu hỏi trên, chúng ta có thể bắt đầu dùng câu lệnh để tải component về dự án:

// npx shadcn@latest add <Tên component>
npx shadcn@latest add button

Câu lệnh phía trên có tác dụng để cài đặt component Button. Sau khi cài đặt thành công, chúng ta sẽ thấy được mã nguồn của nó trong thư mục của dự án.

Theme & Colors

Shadcn cung cấp cho người dùng một loạt các theme với nhiều màu sắc đa dạng, hài hòa. Tông màu dùng cho các component cũng được sắp xếp bố cục một cách kỹ lưỡng, rõ ràng với hai chế độ sáng/tối khác nhau:

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 224 71.4% 4.1%;
    --card: 0 0% 100%;
    --card-foreground: 224 71.4% 4.1%;
    --popover: 0 0% 100%;
    --popover-foreground: 224 71.4% 4.1%;
    --primary: 262.1 83.3% 57.8%;
    --primary-foreground: 210 20% 98%;
    --secondary: 220 14.3% 95.9%;
    --secondary-foreground: 220.9 39.3% 11%;
    --muted: 220 14.3% 95.9%;
    --muted-foreground: 220 8.9% 46.1%;
    --accent: 220 14.3% 95.9%;
    --accent-foreground: 220.9 39.3% 11%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 20% 98%;
    --border: 220 13% 91%;
    --input: 220 13% 91%;
    --ring: 262.1 83.3% 57.8%;
    --radius: 0.5rem;
    --chart-1: 12 76% 61%;
    --chart-2: 173 58% 39%;
    --chart-3: 197 37% 24%;
    --chart-4: 43 74% 66%;
    --chart-5: 27 87% 67%;
  }

  .dark {
    --background: 224 71.4% 4.1%;
    --foreground: 210 20% 98%;
    --card: 224 71.4% 4.1%;
    --card-foreground: 210 20% 98%;
    --popover: 224 71.4% 4.1%;
    --popover-foreground: 210 20% 98%;
    --primary: 263.4 70% 50.4%;
    --primary-foreground: 210 20% 98%;
    --secondary: 215 27.9% 16.9%;
    --secondary-foreground: 210 20% 98%;
    --muted: 215 27.9% 16.9%;
    --muted-foreground: 217.9 10.6% 64.9%;
    --accent: 215 27.9% 16.9%;
    --accent-foreground: 210 20% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 20% 98%;
    --border: 215 27.9% 16.9%;
    --input: 215 27.9% 16.9%;
    --ring: 263.4 70% 50.4%;
    --chart-1: 220 70% 50%;
    --chart-2: 160 60% 45%;
    --chart-3: 30 80% 55%;
    --chart-4: 280 65% 60%;
    --chart-5: 340 75% 55%;
  }
}

Để thay đổi các màu trong theme, lập trình viên có thể chỉnh sửa qua các biến CSS (CSS variable) hoặc trực tiếp như thông thường vào file cấu hình của Tailwind CSS. Khi chọn hướng sử dụng biến CSS, cần chỉnh sửa giá trị của “cssVariable” trong file “component.json”:

{
   …
  "tailwind": {
    …
   // Sửa giá trị của cssVariables = true
    "cssVariables": true
  },
  …
}

Ví dụ về một đoạn mã dùng biến CSS như sau:

--primary: 222.2 47.4% 11.2%;--primary-foreground: 210 40% 98%;

Để sử dụng các biến màu đã khai báo như trên, chúng ta cần thêm chúng vào file cấu hình của Tailwind:

module.exports = {
  theme: {
    extend: {
    ….
      colors: {
        “primary”: "hsl(var(--primary))",
        "primary-foreground": "hsl(var(--primary-foreground))",
      },
    },
    ….
  },
}

Các mã màu được Shadcn biểu diễn dưới dạng HSL. cách biểu diễn màu dựa trên ba thành phần chính: sắc độ (Hue), độ bão hòa (Saturation), và độ sáng (Lightness). Việc sử dụng HSL để thể hiện màu sắc giúp màu dễ đọc, thân thiện hơn đối với mắt người và dễ dàng điều chỉnh, thay đổi tông màu.

Components, Blocks & Charts

Shadcn cung cấp 49 component, bao gồm cả những loại cơ bản như Button, Card, Input,… cho đến các loại phức tạp hơn như Accordion, Menubar, Carousel,… Thay vì phải tự xây dựng component từ đầu, lập trình viên có thể tiết kiệm thời gian phát triển bằng cách tận dụng các component này.

Không chỉ cung cấp các component riêng lẻ, Shadcn còn tạo sẵn các block, là tập hợp của nhiều component được sử dụng chung để tạo nên giao diện đẹp, hài hòa, phù hợp với các trường hợp sử dụng như dashboard hoặc biểu đồ (chart). Người dùng có thể dễ dàng tải về và sử dụng các block này để tối ưu tốc độ phát triển.

Lợi ích Shadcn mang lại

• Tối ưu performance và độ lớn của bundle: Không có sự cài đặt dư thừa các component bởi vì dự án chỉ chứa những component cần thiết. Điều này giúp cho độ lớn bundle nhỏ đi và tốc độ tải cũng sẽ nhanh hơn.
• Dễ cài đặt và sử dụng: Việc cài đặt Shadcn vào dự án là vô cùng đơn giản chỉ với một vài thao tác nếu sử dụng CLI. Còn đối với trường hợp thủ công thì người dùng chỉ cần copy & paste mã nguồn vào dự án.
• Khả năng tùy chỉnh tự do: Sau khi cài đặt component vào dự án, người dùng hoàn toàn có toàn quyền kiểm soát , tinh chỉnh và thay đổi mã nguồn của component.

Kết luận

Tuy Shadcn vẫn còn khá mới, nhưng với tốc độ phát triển ấn tượng trong năm qua, Shadcn đang ngày càng hỗ trợ nhiều component phức tạp hơn với đa dạng styling cho các use case khác nhau. Tính năng mới cũng đang được phát triển để bắt kịp với thời đại AI, đó là khả năng tùy chỉnh component thông qua chat với AI (tính năng Open in v0).

Với những giá trị lợi ích, tính năng mà Shadcn mang lại cùng tiềm năng phát triển nhanh, nó hứa hẹn vẫn sẽ tiếp tục là một xu hướng đáng chú ý trong 1-2 năm tới.