Shadcn/UI chuyển mặc định từ Radix sang Base UI

 (ui.shadcn.com)
3 điểm bởi GN⁺ 6 giờ trước | 1 bình luận | Chia sẻ qua WhatsApp
  • Từ tháng 7/2026, shadcn/ui sẽ chuyển luồng mặc định cho dự án mới và tài liệu sang Base UI làm trung tâm, đổi hướng khỏi mặc định Radix đã duy trì từ khi ra mắt năm 2023
  • Base UI đã đạt phiên bản ổn định 1.6.0 và hơn 6 triệu lượt tải mỗi tuần; trong dự án shadcn/create, nó cũng được chọn nhiều hơn Radix theo tỷ lệ 2:1
  • Radix không bị ngừng hỗ trợ; ứng dụng hiện có có thể giữ nguyên, và ngoài các component chỉ có trên Base UI thì các bản cập nhật và component mới vẫn sẽ tiếp tục được cung cấp
  • Việc migration được cung cấp dưới dạng agent skill thay vì codemod, cho phép chuyển dần các component đã chỉnh sửa và nơi sử dụng chúng theo từng component, đồng thời để lại báo cáo .migration/ và commit git
  • Cùng với các component UI cho chat, registry dựa trên kho lưu trữ GitHub, shadcn eject, và style mới Rhea, phạm vi của shadcn/ui đang mở rộng sang cả việc phân phối component và cấu thành UI sản phẩm nói chung

Base UI trở thành thư viện component mặc định

  • Từ tháng 7/2026, Base UI được chỉ định là thư viện component mặc định của shadcn/ui
  • Khi shadcn/ui ra mắt vào tháng 1/2023, nó được xây dựng dựa trên Radix; khi đó Radix là lựa chọn có các component headless không kèm style, API, khả năng truy cập và kinh nghiệm dùng trong ứng dụng thực tế
  • Base UI là thư viện mới do chính những người tạo ra Radix đang xây dựng, và shadcn/ui đã làm lại toàn bộ component cho Base UI trong khi vẫn giữ nguyên lớp trừu tượng hiện có
  • Tháng 12/2025, npx shadcn create đã cho phép chọn cả hai thư viện, và đến tháng 1/2026 thì tài liệu cho Base UI được hoàn thiện

Lý do đổi mặc định

  • Độ ổn định và luồng sử dụng của Base UI

    • Phiên bản Base UI là 1.6.0
    • Lượt tải hàng tuần là hơn 6 triệu
    • Đội ngũ Base UI phát hành đều đặn các component mới và hữu ích
    • Các dự án mới của shadcn/ui đang dùng Base UI
    • Các dự án tạo bằng shadcn/create chọn Base UI nhiều hơn Radix theo tỷ lệ 2:1
    • shadcn/ui phản ánh xu hướng lựa chọn này thành mặc định chính thức

Những gì thay đổi trong dự án mới và tài liệu

  • Khi chạy npx shadcn init trong dự án mới, Base UI sẽ là lựa chọn mặc định
  • shadcn/create sẽ hiển thị Base UI trước
  • Trang component trong tài liệu sẽ mở tab Base UI theo mặc định, và tài liệu Radix có thể truy cập chỉ với một cú nhấp

Điều người dùng Radix cần biết

  • Radix vẫn tiếp tục được hỗ trợ

    • shadcn/ui tiếp tục duy trì hỗ trợ cho Radix
    • Ngoại trừ các component chỉ tồn tại trên Base UI, mọi bản cập nhật và component mới sẽ được cung cấp cho cả hai thư viện
    • Ứng dụng hiện có không cần phải migration
    • Radix là thư viện trưởng thành và đã được kiểm chứng
    • shadcn/ui cũng vẫn đang dùng Radix trong production và các dự án nội bộ của họ cũng không migration
    • Nếu thích Radix cho dự án mới, có thể dùng cờ tùy chọn
    • Nếu script hoặc CI chạy shadcn init ở chế độ không tương tác đang kỳ vọng Radix, cần thêm -b radix để giữ nguyên luồng cũ
    • Khi tạo registry, nếu muốn cố định vào một thư viện cụ thể thì có thể cung cấp cấu hình registry:base
    • Các mục không có cấu hình đó giờ sẽ được khởi tạo bằng Base UI
    • Base UI được khuyến nghị cho dự án mới

Cách chuyển sang Base UI

  • Migration không bắt buộc, nhưng nếu muốn thì có thể dùng skill
  • Có thể yêu cầu coding agent như sau
    • migrate accordion to base-ui
  • Cách mặc định là migration dần dần
    • Chuyển từng component và nơi sử dụng chúng, từng cái một
    • Dự án luôn được giữ ở trạng thái green và sẵn sàng deploy
    • Trong quá trình làm việc, hai thư viện có thể cùng tồn tại
    • Có thể dừng giữa chừng rồi tiếp tục sau
    • Nếu muốn, cũng có thể yêu cầu toàn bộ dự án trong một lần

Vì sao chọn skill thay vì codemod

  • Component shadcn/ui là mã do người dùng sở hữu và chỉnh sửa, nên codemod có thể phù hợp với component chưa bị đụng tới nhưng dễ hỏng với component đã sửa
  • Trong skill đã có đổi tên, đổi prop, khác biệt hành vi được rà soát thủ công theo tiêu chí của cả hai thư viện
  • Agent có thể nhận ra phần người dùng đã thay đổi và áp dụng các thay đổi đó sang mục tiêu migration
  • Những thay đổi có thể xử lý máy móc sẽ được sửa trên toàn bộ mã nguồn
    • Ví dụ: asChild đổi thành render
  • Những thay đổi về hành vi sẽ không bị vá âm thầm mà được đánh dấu để người dùng quyết định cuối cùng

Kết quả migration để lại

  • Mỗi lần chạy sẽ để lại ba kết quả
    • Mã hoạt động được: trước khi báo thành công sẽ chạy typecheck và build
    • Báo cáo theo từng component: trong .migration/ ở thư mục gốc dự án sẽ ghi lại phần đã đổi, phần giữ nguyên và checklist cần kiểm tra thủ công
    • Lịch sử git sạch: để lại một commit cho mỗi component trên nhánh, và muốn rollback thì chỉ cần xóa nhánh
  • Ví dụ báo cáo là .migration/accordion.md, gồm các phần sau
    • Changed
    • Left alone
    • Behavior changes
    • Verify by hand
  • Vì tiến độ được lưu trong file và lịch sử git mà không có trạng thái ẩn, nên có thể tiếp tục công việc từ bất kỳ agent hoặc phiên làm việc nào
  • Hoạt động trên Claude Code, Cursor và các agent hỗ trợ skill
  • Trong thử nghiệm dự án thực tế, hơn 36 trong số hơn 60 component là Radix; migration toàn bộ mất khoảng 25 phút, khoảng 10 nghìn token cho mỗi component
  • Build đã qua sạch sẽ và các tùy biến được giữ nguyên

Bổ sung component cho giao diện chat

  • Tháng 6/2026, các component mới để xây dựng giao diện chat đã được thêm vào
  • Bước đầu tiên là các mảnh ghép cốt lõi để tạo lớp hội thoại
    • cuộn
    • hàng tin nhắn
    • bong bóng hội thoại
    • tệp đính kèm
    • marker
  • MessageScroller là container cuộn cho hội thoại
    • anchored turns
    • streamed replies
    • saved thread restore
    • prepended history
    • jump-to-message
    • scroll controls
    • visibility tracking
  • MessageScroller không sở hữu tin nhắn, trạng thái AI, gửi, lưu hay trạng thái model; trình render nội dung do người dùng cung cấp
  • MessageScroller cũng được cung cấp dưới dạng component headless không kèm style trong @shadcn/react

Vai trò của Message, Bubble, Attachment, Marker

  • Message bố trí một hàng trong hội thoại
    • avatar
    • căn chỉnh
    • header
    • nội dung
    • footer
    • xử lý tin nhắn nhóm
  • Bubble render bề mặt của tin nhắn
    • variants
    • căn chỉnh
    • reactions
    • links
    • buttons
    • hỗ trợ collapsible content
  • Attachment render file và hình ảnh
    • media
    • metadata
    • upload state
    • actions
    • cung cấp full-card trigger nhưng vẫn giữ các action có thể bấm riêng
  • Marker render cập nhật trạng thái, ghi chú hệ thống, hàng phân cách và đường phân tách có nhãn
    • streaming state
    • tool activity
    • dùng cho các trường hợp như date breaks
  • Các component này được thiết kế nhỏ gọn để có thể ghép lại cho AI chat, support inbox, team thread, group chat và UI hội thoại theo từng sản phẩm

CSS utility cho chat UI và @shadcn/react

  • Hai CSS utility mới đã được thêm vào
    • scroll-fade: thêm fade giúp nhận biết cuộn ở mép của container cuộn
    • shimmer: thêm shimmer cho văn bản trạng thái trực tiếp như "Thinking…", "Generating response…", thực thi công cụ và marker streaming
  • Cả hai utility đều có trong shadcn/tailwind.css
    • Các dự án được khởi tạo bằng npx shadcn@latest init đã bao gồm sẵn
  • @shadcn/react là gói mới dành cho các component React headless không kèm style
    • primitive đầu tiên là @shadcn/react/message-scroller
    • Các component registry sẽ bọc theo style shadcn/ui, nhưng hành vi cuộn như anchoring, auto-follow, prepend preservation, scroll commands, visibility nằm trong package này
  • Cách tiếp cận này cung cấp hành vi mà không bị ràng buộc vào style thị giác, đồng thời cho phép kiểm thử logic tương tác khó tại một nơi
  • Có thể dùng với cả Radix và Base UI

Quan hệ với AI Elements

  • Các component chat mới không thay thế AI Elements
  • Vẫn có thể tiếp tục dùng các component và pattern giao diện AI của AI Elements
  • Bản phát hành này tập trung vào việc đưa các mảnh ghép cốt lõi của chat vào shadcn/ui từng phần một
  • Nếu đã dùng component AI Elements, không cần viết lại ứng dụng
  • Có thể thử phiên bản shadcn/ui khi cần lớp trừu tượng mới hơn, style được cập nhật và hỗ trợ cho cả Radix lẫn Base UI

Dùng kho lưu trữ GitHub làm registry

  • Từ tháng 6/2026, có thể dùng kho lưu trữ GitHub công khai làm registry
  • Chỉ cần thêm registry.json ở thư mục gốc kho lưu trữ và định nghĩa các mục sẽ phân phối, người dùng có thể cài trực tiếp từ GitHub bằng CLI shadcn
  • GitHub registry là source registry
    • không cần chạy shadcn build
    • không cần publish các file JSON item đã sinh ra
    • không cần thiết lập máy chủ registry
  • CLI sẽ đọc registry.json ở thư mục gốc, phân giải các mục include, tìm mục được yêu cầu và cài các file tương ứng
  • Các mục trong registry không chỉ giới hạn ở component
    • components
    • hooks
    • utilities
    • design tokens
    • feature kits
    • project conventions
    • agent instructions
    • testing setup
    • CI workflows
    • release workflows
    • templates
    • codemods
    • migration kits
    • và các file dự án khác
  • Địa chỉ GitHub registry hoạt động trong cùng các lệnh như registry hiện có
    • list
    • search
    • view
    • install

shadcn eject và shadcn/tailwind.css

  • Khi hỗ trợ cả Radix lẫn Base UI, cần một nơi để đặt các utility Tailwind dùng chung mà cả hai thư viện phụ thuộc vào
    • ví dụ: custom variant như data-open:, data-closed:
    • ví dụ: utility như no-scrollbar
  • Trong quá trình làm hỗ trợ RTL, cũng có một số lỗi dễ sửa hơn ở một chỗ thay vì lặp lại trên mọi component
  • Vì vậy shadcn/tailwind.css được tạo ra
    • khi chạy init, @import "shadcn/tailwind.css" sẽ được thêm vào file CSS global
    • nó hoạt động như import CSS kiểu tw-animate-css
    • đây là phụ thuộc nhỏ, được tree-shaken trong production và được phân giải khi build
  • Nếu không muốn phụ thuộc CSS của gói shadcn, có thể dùng shadcn eject
    • inline shadcn/tailwind.css vào file CSS global
    • gỡ phụ thuộc shadcn khỏi dự án
  • Trong monorepo, cần chạy lệnh ở workspace có components.json và file CSS global

Style mới Rhea

  • Tháng 5/2026, style shadcn/ui mới Rhea đã được thêm vào
  • Rhea là phiên bản Luma gọn hơn, với spacing nhỏ hơn và bề mặt dày đặc hơn, được tạo cho giao diện sản phẩm tập trung
  • Rhea giữ lại sự mềm mại và hình khối của Luma nhưng sắp xếp button, input, menu, card và list chặt hơn
  • Không chọn cách điều chỉnh --spacing của Luma
    • vì --spacing là multiplier, nên nếu thay đổi thì ý nghĩa của các utility Tailwind quen thuộc như p-2, w-4, m-16 sẽ thay đổi trên toàn bộ ứng dụng
  • Rhea được cung cấp như một style riêng để có thể tự điều chỉnh kích thước component, gap và mật độ trong khi vẫn giữ thang utility nền tảng ở mức dễ dự đoán
  • Rhea có thể dùng cho cả Radix và Base UI trên shadcn/create

Bài viết liên quan

1 bình luận

 
GN⁺ 6 giờ trước
Ý kiến trên Hacker News

  • Trong bài này, mình cảm nhận khá rõ văn phong đặc trưng của Claude, nên giờ thấy hơi mệt và có cảm giác xa cách
    Nếu ngay cả một bài viết ra mắt sản phẩm quan trọng mà con người cũng không đáng để bỏ toàn bộ công sức chăm chút, thì không biết nên vạch ranh giới ở đâu

    • Bài viết truyền đạt hiệu quả những nội dung cần thiết, và trông như đã được viết cũng như cấu trúc sao cho con người dễ đọc
      Nếu dùng AI để viết nhằm có thêm thời gian dành cho việc phát triển phần mềm mã nguồn mở tuyệt vời này, thì mình thấy đó lại là điều tốt
    • Mình hiểu chính xác ý bạn. Mình thường dùng Claude và plannotator, và mọi thứ tốt hơn nhiều sau khi yêu cầu một style guide cụ thể
      Mình lấy “phong cách tài liệu tham khảo MSDN thời CD và blog của Raymond Chen” làm prompt khởi đầu, nhờ đó khả năng tiếp nhận các kế hoạch do AI tạo ra tăng lên rất nhiều; phong cách này khiêm tốn, sâu sắc và tôn trọng độc giả nên rất khuyến nghị
    • Mình đã đọc bài đó và không thấy nó nghe như do AI viết
      Sẽ hơi buồn cười nếu có ai trong đội đứng ra nói là do người viết
    • Hỏi nghiêm túc thì mình thấy tại sao chuyện đó lại quan trọng. Cũng có thể họ viết bản nháp rồi rà lại câu chữ của Claude và đăng lên
      Mình không hiểu vì sao mỗi khi AI hỗ trợ công việc lại cứ phải cố “bắt quả tang”; đây không phải công ty F500 mà là dự án mã nguồn mở. Tài nguyên hạn chế, và tiếng Anh cũng có thể không phải tiếng mẹ đẻ của họ
    • Mình lại nghĩ đây không phải chuyện nên nghe cho qua vì mệt. Bởi cách nó được dùng và trình bày hiện nay gần với lừa dối và giả trá
      Mình tin văn hóa hợp tác cần sự tin cậy và sự thật, và không muốn những bài viết trong đó AI nói dối rằng “tôi đã làm/nói”
      Ví dụ nếu bài này thật sự do Claude viết, thì mình thắc mắc vì sao lại giả vờ như một người trong đội trực tiếp nói bằng những câu như “I said”, “I meant it”. Đó là mạo danh và mang tính lừa dối. Nếu muốn giữ văn hóa hợp tác và trung thực thì nên nói “con người của tôi đã nói”, hoặc ít nhất phải ghi rõ đó là AI đang hành động thay con người

  • Với các ứng dụng nhàm chán, mình tò mò liệu mọi người có thích cách copy-paste của shadcn hơn các thư viện UI truyền thống như Mantine không
    Cách copy-paste dễ chỉnh sửa, nhưng cũng tạo ra vấn đề mới. Những việc đáng lẽ chỉ cần tăng số phiên bản nay lại thành cần một AI agent để nâng cấp

    • Câu “chỉ cần tăng số phiên bản” đánh giá quá thấp những rắc rối mà Material UI đã gây ra trong vài năm qua
      Không phải ở ứng dụng nhàm chán, mà là ở ứng dụng rất lớn, mỗi lần cập nhật phiên bản lớn họ lại đảo API mạnh đến mức cần các migration tẻ nhạt. Sau khi chuyển sang shadcn, mọi thứ dễ hơn vì có thể chỉ nâng cấp một component riêng lẻ và thoải mái thêm component mới. Với Material UI, muốn dùng tính năng mới ở bất cứ đâu thì phải đổi toàn bộ sang API mới, còn shadcn thì có thể làm có chọn lọc
    • Mình hoàn toàn không hiểu cách copy-paste này. Shadcn chỉ có mùi trào lưu, và dù đã tự copy về dùng thử thì mình vẫn không thấy có gì ghê gớm
      Dù vậy ai thích thì cứ dùng; một trong những điểm hay của AI là HN không còn bị ngập bởi chuyện framework JavaScript như trước nữa
    • Với các dự án mới, mình ngày càng nghiêng về hướng vendoring
      Mang một thư viện UI có sẵn vào thì ngắn hạn dễ hơn, nhưng thường quá phức tạp, có cả những tính năng không dùng đến, khó chỉnh sửa khi muốn khác biệt với vô số app dùng cùng thư viện, và khi nâng cấp thì các chỉnh sửa đó lại hỏng theo những cách tinh vi. Mình nghĩ cách tốt nhất là xây dựng thư viện UI của riêng mình. Tự sở hữu nó, tái sử dụng qua nhiều dự án, duy trì cùng một phong cách thị giác nếu muốn, và chỉ thêm những tính năng cần thiết
    • Mantine rất tuyệt. Có thể dựng gần như mọi thứ rất nhanh, rồi sau đó mở rộng hoặc tùy biến hoàn toàn theme và từng component
      Có đường cong học tập, nhưng mình không nghĩ là quá lớn
    • Trong nhiều hệ thống, thực tế hầu như không có chuyện “chỉ cần tăng số phiên bản”. Chỉ khi thư viện component làm đúng chính xác những gì bạn muốn thì mới được như vậy
      Thực tế, component thường không cung cấp đầy đủ hành vi cần thiết, và mọi người hay gắn thêm CSS bổ sung vào component. Nếu phương án thay thế là một việc mất vài giờ, hai dòng CSS sẽ rất hấp dẫn, nhưng hai dòng đó cũng phải được kiểm chứng với mỗi tính năng mới của thư viện component. Khi có nhiều kiểu vá víu CSS như vậy, việc nâng cấp sẽ trở thành cả một dự án

  • Mình khó chịu với việc các bộ UI toolkit phổ biến kiểu này render quá nhiều div
    Nhìn Base UI thì gần như component nào cũng theo kiểu “render một phần tử”, trong khi accordion có những phần tử native như details/summary có thể làm cùng việc. Mình không phải người truyền đạo web native, và cũng thấy web API, đặc biệt là HTML, có nhiều điểm sai, nhưng lạm dụng div cũng là sai

  • Mình đã dùng Shadcn và nhìn chung thích nó, nhưng radio button dựa trên Radix thì hơi quá. Một số lựa chọn khác cũng dùng các giải pháp bị thổi phồng quá mức tương tự
    https://news.ycombinator.com/item?id=46688971

  • Điều thú vị là xu hướng công việc migration đang chuyển từ codemod sang LLM
    Dù codemod mang tính xác định hơn, tôi tự hỏi liệu thời của nó có đang dần kết thúc không

    • Tôi nghĩ sẽ ra sao nếu dùng LLM để tạo codemod mang tính xác định
      Sau đó chạy codemod, gắn thêm các cơ chế bảo vệ mang tính xác định khác rồi lặp lại, đồng thời đưa kết quả trở lại LLM để cải thiện codemod
    • Cách đóng khung trong bài gốc là một lối suy nghĩ nguy hiểm. Bản thân codemod có cũng được, không có cũng được
      Thứ cần có không phải là file skill cho LLM mà là tài liệu dành cho con người. Chỉ cần viết hướng dẫn migration cho con người là được. Cuối cùng có lẽ sẽ mất một thời gian để nhận ra rằng file skill và tài liệu phải là cùng một thứ
    • Tôi thắc mắc codemod ở đây có nghĩa là gì
    • Tôi nghĩ hai thứ bổ trợ cho nhau một cách hoàn hảo và sau này vẫn sẽ như vậy
      Tôi tiếp tục dùng file AGENTS.md cho các quy tắc mềm, và dùng quy tắc linter tùy chỉnh cho các quy tắc cứng; tôi xem đây là cách lấy được ưu điểm của cả hai thế giới

  • Tôi muốn dùng shad-CN, nhưng lần nào cuối cùng cũng quay lại Mantine
    Nó nhanh hơn nhiều so với việc phải nhớ cần nối những context nào

  • Tôi tự hỏi thay đổi này có mang lại kết quả tốt hơn cho người dùng, chẳng hạn như giảm kích thước bundle, hay không
    Hay nó gần với một thay đổi giúp cải thiện chất lượng cuộc sống của các maintainer Shadcn hơn

  • Tôi thắc mắc trong Angular thì thứ tương đương với shadcn/ui là gì
    PrimeNG gần đây đã đổi giấy phép, nên tôi đang tìm một lựa chọn thay thế phù hợp cho dự án mới

    • Hai lần cố đưa thay đổi giấy phép của PrimeNG lên HN[1] đều thất bại, nhưng nếu bạn đang dùng thư viện component của PrimeTek thì cần biết về thay đổi này
      PrimeNG, PrimeReact, PrimeVue đều sẽ chuyển hoàn toàn sang mã nguồn đóng, và từ năm 2027, giấy phép sử dụng tiếp tục sẽ là 800 USD cho mỗi ghế developer[2]. Các repository hiện tại sẽ được archive[3]. PrimeFaces vẫn tiếp tục là mã nguồn mở, nhưng giờ sẽ do các developer tình nguyện độc lập, không phải nhân viên PrimeTek, phát triển và bảo trì
      [1]: https://hn.algolia.com/?q=The+Next+Chapter+of+PrimeTek
      [2]: https://primeui.dev/nextchapter
      [3]: https://github.com/primefaces/primeng
    • Cũng cùng tình cảnh. Ở chỗ làm chúng tôi đã dùng PrimeNG cho nhiều app, và có lẽ sẽ bị kẹt ở Angular 21 cho đến khi tìm được một lựa chọn thay thế phù hợp
      Tuy vậy nghe nói có một nhóm đã fork PrimeNG và dự định bảo trì nó. Tên mới thì vẫn chưa quyết định
      https://github.com/openng-org/open-prime
    • https://spartan.ng/
    • Để đáp lại việc một hệ thống tương tự Shadcn vẫn chưa có sẵn để dùng trực tiếp trên nhiều stack như Svelte, Angular, Nunchucks, tôi đang làm Lily Design System
      Tất cả đều miễn phí và mã nguồn mở; nếu gửi phản hồi hoặc đề xuất, tôi có thể dễ dàng thêm vào Lily
      https://lilydesignsystem.github.io
    • https://www.zardui.com

  • Tôi nhớ những style guide skeuomorphic kiểu cũ
    Hình như cái cuối cùng là Blueprint

  • URL phải là https://ui.shadcn.com/docs/changelog/2026-07-base-ui-default