Registry model đang hoạt động tốt. Sau ba năm nghi ngại, shadcn/ui đã trở thành nền tảng mặc định cho việc phát triển UI có hỗ trợ AI — mọi AI coding agent lớn đều mặc định dùng nó, và CLI v4 (tháng 3, 2026) đã giảm đáng kể đau đớn khi nâng cấp. Bundle size vẫn nhỏ hơn 3–4× so với MUI hay Mantine với số lượng component tương đương. Vấn đề nan giải còn lại là sự phân kỳ khi tùy chỉnh: một khi bạn đã chỉnh sửa đáng kể, --diff cho thấy delta nhưng không thể tự áp dụng cho bạn.

Bài này dành cho ai

Team React và Next.js đang chọn component library vào giữa năm 2026. Nếu bạn dùng Angular, hoặc không dùng Tailwind và không muốn bắt đầu, dừng đọc tại đây — shadcn/ui không dành cho bạn. Nếu bạn chưa chắc về Tailwind, Tailwind CSS vs CSS Modules sẽ giúp bạn đánh giá trước. Nếu bạn cần 100+ component sẵn production mà không cần tùy chỉnh nhiều, Mantine 9 phù hợp hơn và bài review này sẽ giải thích tại sao.

Những gì chúng tôi đã thử nghiệm

[email protected] — phát hành ngày 5 tháng 5, 2026, CLI v4
Các flag CLI: --diff, --dry-run, --view, --template
shadcn/skills (AI context layer) và MCP server
So sánh bundle size: shadcn/ui + Radix vs Mantine 9 vs MUI, mẫu 30 component
Base UI vs Radix cho component Dialog

Trải nghiệm nâng cấp với registry

Mô hình copy-paste giải quyết đúng vấn đề nó tuyên bố: bạn không thể bị phá vỡ bởi một thay đổi upstream npm khi không có dependency upstream. Lỗi shadcn update button là merge conflict trong code của chính bạn, không phải tai nạn semver của người khác.

CLI v4 thêm ba flag làm điều này trở nên cụ thể hơn:

--diff hiển thị unified diff của những gì update sẽ thay đổi trước khi bạn xác nhận
--dry-run chạy logic cập nhật mà không động đến file nào
--view mở source trong trình duyệt

Đây là những cải tiến thực sự về trải nghiệm so với workflow v3, nơi câu hỏi “thay đổi gì?” đồng nghĩa với việc phải git diff thủ công sau khi đã chạy.

Vấn đề chưa được giải quyết là sự phân kỳ khi tùy chỉnh. Nếu bạn đã chỉnh sửa đáng kể một component — đổi tên variant, tái cấu trúc markup, thêm compound sub-component — --diff cho thấy xung đột, không phải merge tự động. Bạn tự giải quyết bằng tay. GitHub Discussion #790, mở từ năm 2023, ghi lại yêu cầu của cộng đồng về lệnh update tự động cho chính lý do này; vẫn chưa được giải quyết tính đến tháng 5, 2026. Với usage gần stock: ma sát nâng cấp thấp. Với tùy chỉnh nặng: đây là chi phí thực sự.

Ngoài ra không có semantic versioning theo từng component. shadcn update lấy phiên bản registry hiện tại, có thể thay đổi theo bất kỳ hướng nào. Flag --diff bù đắp cho điều này, nhưng nghĩa là bạn đang làm việc mà không có changelog per-component.

shadcn CLI v4: các tính năng AI-native

shadcn/skills

shadcn/skills là context layer dạy AI agent (v0, Cursor, Claude) về registry thực tế của bạn — component đã tùy chỉnh, design token, naming convention. Không có nó, agent sinh code theo stock shadcn mặc định và bạn phải tự fix các chỗ lệch. Có nó, agent sinh code theo đúng cấu hình đã cài của bạn.

Đây là tính năng hữu ích nhất trong v4. Nếu team bạn dùng AI assistant cho công việc UI, shadcn/skills loại bỏ một loại chỉnh sửa vốn vô hình trong time-tracking.

MCP server

MCP server cho phép AI assistant cài component từ bất kỳ registry nào qua ngôn ngữ tự nhiên: “thêm component Dialog từ corporate registry.” Nó gọi shadcn add bên dưới. Hữu ích trong môi trường mà developer muốn ở lại trong chat thay vì chuyển sang terminal.

Preset và template

Preset đóng gói toàn bộ design system thành một mã ngắn: npx shadcn init --preset [CODE]. Team có thể publish design system của mình dưới dạng preset và onboard project mới chỉ bằng một lệnh. Các bổ sung registry:base và registry:font mở rộng điều này cho full design system và font configuration như các install payload hạng nhất.

shadcn init --template hỗ trợ Next.js, Vite, Laravel, React Router, Astro, và TanStack Start. Nếu bạn không dùng một trong số đó, bạn tự cấu hình.

Package.json imports (v4.7.0, tháng 5, 2026)

Hỗ trợ package.json#imports cho phép dùng private #... alias trong code component. Kết hợp với target alias trong files[].target, điều này làm cho setup monorepo sạch hơn đáng kể — component có thể cài vào đúng package mà không cần post-processing.

Sức khỏe hệ sinh thái

Bánh đà phân phối qua v0.dev

v0 mặc định dùng shadcn/ui. Đây là yếu tố đơn lẻ lớn nhất tác động đến con số adoption năm 2026. Team bắt đầu project với v0 đương nhiên dùng shadcn/ui, rồi ở lại vì chi phí chuyển đổi ngày càng lớn. 115K GitHub star và ~4.7M lượt tải CLI hàng tuần trên npm [11] (thấp hơn thực tế — mô hình copy-paste nghĩa là nhiều lượt cài chưa bao giờ qua npm) phản ánh điều này.

Storybook và testing

Các tích hợp bên thứ ba đã trưởng thành. @storybook/react hoạt động ngay từ đầu. Test component với Testing Library đơn giản vì component là code local, không phải npm module hộp đen — bạn có thể thêm data-testid hay tái cấu trúc markup mà không cần chờ PR vào library.

Community registry block

Hệ sinh thái block của cộng đồng đã tăng trưởng đáng kể. Các registry không chính thức (như shadcn/ui Blocks collection) cung cấp các page section đã được compose sẵn — dashboard, sidebar, auth form — có thể cài qua shadcn add. Chất lượng không đồng đều. Coi chúng là điểm khởi đầu, không phải bản chạy thẳng lên production.

Tổng quan các lựa chọn thay thế

Thư viện	Lượt tải npm hàng tuần	Bundle 30 component	Phù hợp nhất
shadcn/ui + Radix	~4.7M CLI [11] (thấp hơn thực tế)	~80KB	Tailwind shop, AI-assisted dev
Mantine 9	~2M [12]	~250KB	Team cần 100+ component + hook
MUI	~9.3M [13]	—	Enterprise, ràng buộc Material Design
Base UI	đang tăng	nhỏ hơn Radix	Performance-critical, Tailwind tùy chọn
DaisyUI 5	đang tăng	JS tối giản	CSS-class workflow, accessibility không có sẵn

MUI là lựa chọn mặc định của enterprise và sẽ không mất vị trí đó trong thời gian gần. ~9.3M lượt tải hàng tuần [13] đồng nghĩa với hệ sinh thái (tích hợp bên thứ ba, quen thuộc trong thị trường tuyển dụng, câu trả lời Stack Overflow) vô song. Ràng buộc là aesthetics Material Design — nếu visual identity sản phẩm của bạn xung đột với Material, câu chuyện tùy chỉnh MUI là công việc đáng kể.

Mantine 9 là lựa chọn đúng nếu bạn cần 100+ component ngay từ đầu cộng với 50+ hook. Bundle ~250KB cho 30 component so với ~80KB của shadcn/ui, nhưng bạn nhận được bộ toolkit đầy đủ. Nếu không dùng Mantine, bạn sẽ tự viết khoảng 40% UI từ đầu trên nền shadcn/ui — lúc đó chênh lệch bundle đó đảo chiều.

Base UI được hỗ trợ chính thức dưới shadcn (bạn có thể đổi Radix primitive sang Base UI từ tháng 1, 2026). Base UI và Radix có footprint tương đương — tailkits.com [9] phân loại cả hai là “Very small” trong so sánh bundle, không có benchmark KB cụ thể. Nếu bạn đang xây ứng dụng performance-critical và Tailwind chấp nhận được, đây là lựa chọn primitive sạch hơn. Để hiểu rõ khi nào nên chọn Radix trực tiếp thay vì thông qua shadcn, xem shadcn/ui vs Radix UI.

DaisyUI 5 hoạt động trên mô hình hoàn toàn khác: CSS class, JavaScript tối giản, không phụ thuộc Radix. Accessibility không có sẵn — bạn tự thêm ARIA attribute. Đối tượng khác nhau, không phải đối thủ trực tiếp.

Kết luận

Chọn shadcn/ui nếu bạn dùng React/Next.js với Tailwind, sử dụng AI coding assistant, và muốn sở hữu component mà không có npm surface area. shadcn/skills giúp code do AI tạo ra nhắm đúng design system thực tế của bạn thay vì stock defaults. Với usage gần stock, ma sát nâng cấp thấp.

Chọn Mantine 9 nếu bạn cần thư viện component đầy đủ — 100+ component, date picker, rich text editor, 50 hook — và không muốn tự compose. Bundle lớn hơn nhưng bạn không phải tự viết 70% còn thiếu.

Chọn MUI nếu bạn trong môi trường enterprise nơi Material Design chấp nhận được và sự quen thuộc trong thị trường tuyển dụng quan trọng. Độ sâu hệ sinh thái vô song.

Chọn Base UI thay vì Radix nếu bạn xây trên headless primitive yêu cầu performance cao và footprint component nhỏ hơn đáng đánh đổi.

Lưu ý

Con số bundle size của shadcn/ui và Mantine 9 lấy từ so sánh bên thứ ba (saasindie.com, tháng 9, 2025) dùng mẫu 30 component, không phải benchmark chính thức. Bundle thực tế phụ thuộc vào component nào bạn import và bundler có tree-shake đúng không — hãy đo build của chính mình.

Câu chuyện nâng cấp copy-paste đang cải thiện nhưng chưa hoàn thiện. Team có component tùy chỉnh nặng sẽ mất thời gian xử lý merge conflict khi nâng cấp. Flag --diff hỗ trợ nhưng không tự động hóa việc giải quyết.

Chúng tôi không thử nghiệm shadcn/ui trong setup không dùng Tailwind. Tailwind v4 compatibility đã được xác nhận nhưng chúng tôi chưa verify end-to-end.

shadcn/ui năm 2026: Registry model có hoạt động tốt không?