About Zag
Overview
Zag provides headless, unstyled component logic for the web, built on finite state machines. It lets developers write complex component logic once and consume it in any JavaScript framework without re-implementing common widgets.
Created by Segun Adebayo, the project is heavily inspired by XState but designed to be easier to maintain, test, and enhance. Zag abstracts the logic for many components into a cohesive, framework-agnostic system while leaving styling and presentation fully in the developer's hands.
Key Benefits
- Write component logic once and reuse it in any JavaScript framework.
- Built-in adapters connect machine output to WAI-ARIA compliant DOM semantics for accessible components.
- Machines are completely headless and unstyled, giving you full control over styling.
- Works with React, Vue, Solid, and Svelte out of the box.
- Avoid re-implementing common widgets like tabs and menus across multiple frameworks.
- Machine APIs are resilient and easy to understand, debug, improve, and test.
How It Works
Start by installing the machine package you need, such as @zag-js/number-input. Consume the machine with your framework's adapter, then connect it to your UI by converting the machine to its API and rendering the resulting props. The logic runs entirely inside the machine while your component stays presentational.
Use Cases
- Design system teams build a cohesive, accessible component library that runs across frameworks.
- Framework component authors publish one logic implementation that works in React, Vue, Solid, and Svelte.
- Frontend developers prototype interactive widgets like number inputs without hand-writing state logic.
- Accessibility-focused teams ship WAI-ARIA compliant components through built-in adapters.
Zag Pricing
Pricing extracted from the product website and may change. Check the source for current details.