Khi dựng một website nhiều trang, bạn sẽ vẽ đi vẽ lại cùng một cái nút, cùng một ô tìm kiếm, cùng một thẻ sản phẩm hàng chục lần. Component library sinh ra để chấm dứt việc lặp đó: mỗi thành phần được dựng một lần, kiểm thử kỹ, rồi cả đội lấy ra ghép lại. Bạn ghép giao diện như xếp Lego thay vì đẽo từng viên gạch.
Một component library gồm những gì
Không phải cứ gom vài file nút lại là thành thư viện. Một component library đúng nghĩa có ba lớp:
- Bản thân component — mã nguồn (code) hoặc bản Figma của từng thành phần: nút, ô nhập, thẻ (card), hộp thoại (modal), bảng dữ liệu, thanh điều hướng…
- Các trạng thái và biến thể — mỗi component không chỉ có một dáng. Một cái nút có biến thể chính/phụ, có trạng thái bình thường, di chuột (hover), đang nhấn, vô hiệu hoá (disabled), đang tải (loading). Thiếu phần này thì người dùng lại tự chế, và thư viện vỡ.
- Tài liệu đi kèm — bảng thuộc tính (props — tham số truyền vào component), ví dụ dùng thực tế, ghi chú về khả năng tiếp cận (accessibility). Theo Nielsen Norman Group, component không có tài liệu thì người ta đoán mò cách dùng, dẫn tới các bản sao lệch nhau.
Bảng props — phần dễ bị bỏ quên nhất
Tài liệu tốt mô tả mỗi thuộc tính của component theo cột rõ ràng: tên, kiểu dữ liệu, có bắt buộc không, giá trị mặc định, mô tả. Đây chính là điểm khác biệt giữa “có code” và “có thư viện dùng được”:
Component: Button
| Prop | Kiểu | Mặc định | Mô tả
|-----------|--------------------|-----------|--------------------------
| variant | primary | ghost | primary | Kiểu nút (chính / viền)
| size | sm | md | lg | md | Cỡ nút
| loading | boolean | false | Hiện vòng xoay, khoá nút
| disabled | boolean | false | Vô hiệu hoá nútCông cụ như Storybook giúp dựng từng trạng thái thành các “story” xem trực tiếp, kèm bảng props và kiểm tra accessibility tự động. Một nguyên tắc đáng theo là viết tài liệu ngay lúc dựng component, không để sau — vì lúc đó bạn buộc phải nghĩ về API của component từ góc người dùng nó.
Component library khác design system thế nào
Đây là chỗ hay lẫn. Component library là một phần của design system, không phải toàn bộ. Cách phân biệt gọn nhất: component library trả lời câu hỏi “có sẵn những khối nào để ghép”, còn design system là gì trả lời rộng hơn — “dựng giao diện theo nguyên tắc nào, dùng màu/chữ/khoảng cách ra sao, ai được sửa, sửa thế nào”.
| Tiêu chí | Component library | Design system |
|---|---|---|
| Phạm vi | Tập hợp component tái dùng | Khung tổng thể: nguyên tắc + token + component + quy tắc vận hành |
| Mục tiêu chính | Tốc độ khi ghép giao diện | Nhất quán và mở rộng được trên nhiều sản phẩm |
| Có gì đặc trưng | Nút, ô nhập, thẻ, hộp thoại… | Có thêm token, nguyên tắc thiết kế, governance (quản trị) |
| Ví dụ ví von | Tủ nguyên liệu đã sơ chế | Cả căn bếp: nguyên liệu, công thức, nội quy |
Nói cách khác, bạn hoàn toàn có thể có một component library mà chưa có design system. Nhưng một design system trưởng thành luôn chứa bên trong nó một component library.
Component library liên hệ với token và atomic design
Component không tự sinh ra màu sắc hay cỡ chữ — chúng lấy từ design token là gì (biến thiết kế — đơn vị nhỏ nhất lưu màu, cỡ chữ, khoảng cách). Khi token đổi màu thương hiệu, mọi component dùng token đó đổi theo, không phải sửa tay từng cái.
Còn cách sắp xếp các component theo tầng — nguyên tử (atom) ghép thành phân tử (molecule), rồi thành cơ quan (organism) — là phương pháp atomic design chỉ ra. Token là chất liệu, atomic design là cách phân tầng, còn component library là cái tủ chứa thành phẩm. Ba thứ khác vai, làm việc cùng nhau.
Khi nào nên dựng component library riêng
Không phải dự án nào cũng cần. Một trang giới thiệu tĩnh thì thư viện component là dao mổ trâu. Nó đáng làm khi: bạn có nhiều trang dùng chung khối giao diện, có nhiều người cùng dựng, hoặc sản phẩm còn lớn lên. Lúc đó việc dựng sẵn một bộ component có tài liệu sẽ tiết kiệm nhiều hơn cái giá ban đầu.
Tại Web22, mỗi website đều chạy trên một bộ component tái dùng trong theme riêng (web22.dev dùng font Inter Tight, màu coral #FF6986). Vì Web22 vừa thiết kế vừa lập trình, bản thiết kế component và bản code khớp nhau — cái nút trên Figma ra đúng cái nút khi chạy thật, không tam sao thất bản qua khâu bàn giao.
Câu hỏi thường gặp
Component library và UI kit có giống nhau không?
Gần giống. “UI kit” thường chỉ phần thiết kế (bản Figma), còn component library nhấn vào phần dựng sẵn dùng được — đặc biệt là code. Nhiều đội dùng hai từ thay nhau.
Dùng thư viện có sẵn hay tự dựng?
Dự án nhỏ, gấp, không có nhận diện đặc thù thì dùng thư viện sẵn nhanh hơn. Khi cần đúng thương hiệu và kiểm soát lâu dài, một bộ component tự dựng (hoặc tuỳ biến trên nền có sẵn) đáng đầu tư hơn.
Bao nhiêu component thì đủ?
Bắt đầu từ những thứ lặp nhiều nhất: nút, ô nhập, thẻ, thông báo, hộp thoại. Thêm dần khi gặp nhu cầu thật, đừng dựng trước những component chưa ai cần.
Nếu bạn muốn một bộ component đúng thương hiệu và khớp giữa thiết kế với code, tham khảo dịch vụ xây dựng design system của Web22.