Radix UI

UI/UX

UI/UXMiễn phíĐộ khó: Nâng cao

Radix UI

4.0/5Đánh giá của 2dm

Nền tảng trợ năng tốt; phải tự làm phần giao diện.

Component React không kèm giao diện, xử lý sẵn bàn phím và trợ năng; shadcn/ui được xây trên nền này.

Mở trang chính thức Xem cách dùng

Giới thiệu

Radix UI là hệ sinh thái mã nguồn mở cho giao diện React, gồm bốn phần: Primitives, Themes, Icons và Colors. Trong đó Primitives là các thành phần nền tảng như popover, dialog, dropdown, lo phần hành vi và khả năng truy cập, còn phần giao diện để bạn tự thêm CSS.

Các primitive tuân theo chuẩn WAI-ARIA, tự quản lý focus, hỗ trợ cả kiểu điều khiển controlled và uncontrolled, cho phép tinh chỉnh vị trí hiển thị, xử lý va chạm mép màn hình và cách đóng.

Radix Themes là thư viện component có sẵn giao diện, hướng tới phát triển nhanh và dễ bảo trì. Nhiều bộ UI phổ biến được xây trên Radix, nên hiểu Radix giúp dev làm chủ phần hành vi của component.

Tính năng nổi bật

Chú trọng khả năng truy cập

Primitive tuân theo các mẫu WAI-ARIA, hỗ trợ người dùng bàn phím và trình đọc màn hình.

Tự do style

Primitive lo hành vi, bạn tự thêm class và CSS theo thiết kế riêng.

Quản lý focus và lớp hiển thị

Tự xử lý focus, layering và hành vi đóng popup.

Controlled hoặc uncontrolled

Dùng đơn giản theo mặc định hoặc điều khiển trạng thái hoàn toàn bằng code.

Một gói duy nhất

Cài gói radix-ui và import từng primitive theo đường dẫn con.

Radix Themes

Bộ component có sẵn giao diện cho đội muốn làm nhanh.

Dùng để làm gì

Popup và menu trong web app

Làm dropdown, popover, dialog hoạt động chuẩn mà không tự viết logic phức tạp.

Xây design system riêng

Dùng primitive làm lõi hành vi, phủ giao diện theo thương hiệu doanh nghiệp.

Sản phẩm cần tiếp cận tốt

Ứng dụng cho khách hàng đa dạng cần dùng được bằng bàn phím và trình đọc màn hình.

Prototype nhanh

Dùng Radix Themes để có giao diện hoàn chỉnh khi chưa có designer.

Cách dùng

1
Cài gói Radix
Cài gói radix-ui bản mới nhất vào dự án React.
$npm install radix-ui@latest
2
Import primitive
Import primitive cần dùng, ví dụ Popover, có thể import theo đường dẫn con để bundler loại bỏ phần thừa tốt hơn.
3
Ghép các phần
Lắp các phần như Root, Trigger, Portal, Content, Arrow thành component hoàn chỉnh.
4
Thêm style
Gắn className và viết CSS hoặc class Tailwind để tạo giao diện theo thiết kế.

Video hướng dẫn

Radix UI Tutorial: Create Customizable UI Components
Monsterlessons Academy

Base UI vs Radix - I Tested Both (Here’s What You Should Use)
OrcDev

Ví dụ thực tế

Tình huống minh hoạ

Một startup phần mềm bán hàng ở Cần Thơ có designer riêng và muốn giao diện mang dấu ấn thương hiệu, không giống các mẫu có sẵn. Đội dev dùng Radix Primitives cho popover chọn chi nhánh, dialog xác nhận đơn và menu tài khoản, rồi tự viết CSS theo file thiết kế. Phần focus, phím Esc và vị trí popup đã được Radix xử lý, nên đội chỉ tập trung vào giao diện và nghiệp vụ.

Mẹo & lưu ý

Chọn đúng sản phẩm
Cần tự thiết kế thì dùng Primitives, cần nhanh có giao diện thì cân nhắc Radix Themes.
Import theo đường dẫn con
Giúp một số bundler tree-shake hiệu quả hơn.
Giữ nguyên thuộc tính truy cập
Khi style lại, tránh xóa các thuộc tính mà Radix gắn sẵn cho trình đọc màn hình.