chakra-ui/zag

🧠 Zag – Máy trạng thái cho UI thông minh, chuẩn WCAG

Xây một thành phần UI, dùng được trên bất kỳ nền tảng nào – nhờ state machines.

Zag là một thư viện JavaScript dùng để xây dựng các thành phần giao diện người dùng (UI components) dựa trên cơ chế máy trạng thái (finite state machines). Dự án do nhóm phát triển Chakra UI phát triển, hướng đến giải pháp cho vấn đề lặp lại mã nguồn khi triển khai các mẫu thành phần phổ biến (Tabs, Menu, Modal, Tooltip…) trong nhiều framework khác nhau.

✨ Điểm nổi bật

• Viết một lần, dùng mọi nơi: Logic thành phần được mô hình hóa độc lập với framework, hỗ trợ React, Solid, Vue, Svelte và Vanilla JS thông qua các adapter.
• Tiếp cận (Accessibility) là ưu tiên: Tuân thủ chuẩn WAI-ARIA, tự động xử lý bàn phím, quản lý focus, aria roles và thuộc tính.
• Headless – Tự do tùy biến: API máy trạng thái không mang bất kỳ phong cách nào, cho phép bạn áp dụng bất kỳ giải pháp nào cho thiết kế.
• Dựa trên Statecharts: Không tuân thủ SCXML nhưng cung cấp một API giúp xây dựng các thành phần phức tạp một cách nhanh chóng và dễ quản lý.
• Kiểm thử đa framework: Mỗi máy trạng thái đều có bài kiểm thử end-to-end bằng Playwright, đảm bảo hành vi nhất quán trên mọi nền tảng.
• Hệ sinh thái mở rộng: Cài đặt từng thành phần riêng lẻ qua @zag-js/{component}, kèm hỗ trợ wrapper framework như @zag-js/react, @zag-js/vue.

💡 Vì sao đáng chú ý

Thay vì viết lại toàn bộ logic cho từng framework, Zag tách biệt hoàn toàn giữa logic trạng thái và giao diện người dùng, giúp giảm đáng kể độ phức tạp và cải thiện khả năng bảo trì. Đây là lựa chọn lý tưởng khi bạn đang xây dựng hệ thống design system cần hỗ trợ đa nền tảng và tuân thủ tiêu chuẩn truy cập.

#StateMachines #Accessibility #DesignSystem #UIComponents #ZagJS #TiniX