What it does
Zag is a framework-agnostic toolkit that models interactive UI components with state machines. It provides framework adapters and unstyled behavior for components such as dialogs, menus, sliders and date pickers.
Zag models a control’s behaviour as a state machine and connects it to the framework rendering the interface. You install the machine for the component you need, such as @zag-js/slider, alongside a framework adapter. The getting-started guide covers React, Vue 3, Solid and Svelte.
For a slider, useMachine creates the service and connect turns its state into properties and event handlers for the label, track, thumb and other parts. Set min, max and step for the permitted values, or use value and onValueChange to control it from application state. A separate change-end callback lets the application respond when adjustment finishes.
Zag is free under MIT and public package installation needs no account. The machines are unstyled: you assemble the elements and provide their appearance. For example, changing a slider to vertical also requires giving it a height in CSS. Framework adapters handle differences in event and style properties, but the component’s layout remains yours.
Strengths
- State-machine models make component behaviour explicit.
- Unstyled machines and framework adapters allow incremental adoption.
- Slider controls expose bounds, increments and separate change callbacks.
Watch out for
- The lower-level toolkit requires the team to compose and style its controls.
Best for
- Teams implementing custom interactive components across supported frameworks
Sources
- Introduction - Zag (Oct 27, 2026)
- Getting Started - Zag (Oct 27, 2026)
- Slider - Zag (Oct 27, 2026)
- chakra-ui/zag (Oct 27, 2026)