Zag is a JavaScript library that implements accessible UI component patterns using finite state machines, with framework adapters for React, Solid, Vue, Svelte, and vanilla JavaScript.
The library addresses the problem of repeated reimplementation of common component patterns across different frameworks. Rather than building tabs, menus, modals, and similar components separately in each framework using framework-specific reactivity systems, Zag models component interactions as framework-agnostic state machines. This approach reduces complexity and makes components easier to understand, debug, test, and improve. The state machine methodology provides a single source of truth for component behavior that can be adapted to any framework through lightweight wrappers.
Zag suits teams building design systems or component libraries that need to support multiple frameworks without duplicating logic. It is particularly valuable if accessibility is a priority, as the machines are built according to WAI-ARIA authoring practices with keyboard interactions, focus management, and ARIA attributes handled consistently. The headless nature means you retain full control over styling and can use any CSS solution. Choose Zag if you want to write component logic once and deploy it across React, Vue, Solid, Svelte, and vanilla JavaScript without reimplementation.
The project maintains end-to-end tests for every component based on WAI-ARIA specifications to ensure consistent behavior across frameworks. Development prioritizes keeping machines lightweight and straightforward, avoiding complex state machine concepts to maintain clarity and ease of understanding.
