Giới thiệu
Bộ component React cho Tailwind CSS v4, có theme sáng, tối, tương phản cao và hỗ trợ RTL. Dùng qua gói npm hoặc chép mã nguồn vào dự án.
Yugen UI là gì?
幽玄 (yūgen) là vẻ đẹp sâu lắng, gợi nhiều hơn nói. Giao diện của Yugen UI theo tinh thần đó: tiết chế và rõ ràng.
Yugen UI là bộ component React viết bằng TypeScript, chạy trên React 19 với Tailwind CSS v4. Không dùng Tailwind thì import file CSS biên dịch sẵn. Mọi component dùng chung một bộ token, nên đổi theme, màu thương hiệu hay hướng chữ không phải sửa component.
Chọn cách dùng
Ba cách dùng chung token và theme, có thể kết hợp trong một dự án.
| Cách | Hợp khi | Cập nhật |
|---|---|---|
| Gói npmnpm i yugen-ui | Dùng ngay, ít sửa component. | npm update yugen-ui |
| @yugen-ui/clinpx @yugen-ui/cli add button | Cần sửa mã nguồn component trong dự án. | Chạy lại add --overwrite rồi xem diff |
| shadcn CLInpx shadcn@latest add … | Dự án đã dùng shadcn/ui. | Chạy lại add như với shadcn/ui |
Lệnh đầy đủ và yêu cầu phiên bản ở Bắt đầu nhanh.
Nguyên tắc
Token ba lớp
Giá trị gốc → vai trò → class Tailwind. Component chỉ dùng class, nên đổi theme là đổi token, không phải sửa component.
Tiếp cận được
Dùng được bằng bàn phím và trình đọc màn hình, viền focus rõ, chữ đạt tương phản 4.5:1, không chỉ dựa vào màu để báo trạng thái.
Theme đặt bằng attribute
data-theme, data-brand và dir đặt ở <html> cho cả ứng dụng, hoặc cho từng vùng qua YugenProvider.
Ví dụ chép là chạy
Ví dụ trên trang component được kiểm tra kiểu tự động khi import từ yugen-ui.
Phiên bản & giấy phép
Yugen UI đang ở giai đoạn trước 1.0. Bản minor có thể có thay đổi phá vỡ và luôn được ghi rõ ở Có gì mới; bản patch chỉ sửa lỗi. Quy tắc đầy đủ ở Phiên bản.
Giấy phép MIT. Báo lỗi ở GitHub Issues, hỏi đáp và góp ý ở Discussions.
Ghi công
Yugen UI do trandat1114 phát triển. Cấu trúc token và hành vi component lấy cảm hứng từ Microsoft Fluent 2; cách phân phối mã nguồn học từ shadcn/ui. Hành vi phức tạp dựa trên Radix UI, cmdk, react-day-picker và react-resizable-panels. Icon: Fluent System Icons (MIT).