Introduction to Zag
Zag is a framework agnostic toolkit for implementing complex, interactive, and accessible UI components in your design system and web applications.
Zag is part of the next evolution of Chakra UI, and one of the four arms of the future of Chakra UI. Watch the talk here
With Zag, you can build accessible UI components in React, Solid and Vue without sweating over the logic.
In Chakra UI React, we've experienced too many hiccups
and bugs in the past related to how we coordinate events, manage state, and side
effects. Most these bugs are associated with the orchestration within
These issues were replicated in our Chakra UI Vue pursuit as well, and created a maintenance hell for us. We're grateful for this experience because it made us take a step back to define how we would like to build components in the future.
We believe that most widgets should function the same way regardless of the framework they're built with. That's why we built Zag.
Don't re-invent the wheel, let the machines do the work 😊
Powered by state machines 🌳: Zag is built on top of the latest ideas in Statecharts. We don't follow the SCXML specifications, but we've created an API that we think will help us build more complex components fast.
Write once, use everywhere 🦄: The component interactions are modelled in a framework agnostic way. We provide adapters for JS frameworks so you can use it in React, Solid, or Vue 3.
Focus on accessibility ♿️: Zag is built with accessibility in mind. We handle many details related to keyboard interactions, focus management, aria roles and attributes.
Headless ✨: The machine APIs are completely unstyled and gives you the control to use any styling solution you prefer.
Incremental adoption ✨: Adopt the machines as you need them. Each component machine is an NPM package and can be installed individually so you can use them incrementally.
Zag means to take a sharp change in direction. This clearly describes our approach of using state machines to power the logic behind UI components.
When you see someone using classic react, vue or solid to build an interactive UI component that exists in Zag, tell them to "zag it!" ⚡️
Anyone using Zag will be called a "zagger" 💥
The feeling you get when you use Zag will be called "zagadat!" 🚀
The Zag community will be called "zag nation" 🔥
To get involved with the Zag community, ask questions, and chat with the maintainers, join our Discord.
To receive updates on new components, enhancements, blog posts, and tips, follow our Twitter account.
We strongly believe in open source and the power of open collaboration. In the past, we've been inspired by other meaningful projects and amazing people who have inspire(d) us to keep improving our ideas.
Some of the projects we've been inspired by include:
- Chakra UI - https://chakra-ui.com/
- Radix UI - https://www.radix-ui.com/
- Material Web Components - https://github.com/material-components/material-components-web
- React Aria - https://react-spectrum.adobe.com/react-aria
- Goldman Sachs Design System - https://design.gs.com/
- Reakit - https://reakit.io/
- Fast - https://explore.fast.design/components
- Guillermo for writing a great article that sparked the idea for Zag.
- Open UI for inspiring the pattern behind this library
- XState for inspiring the base implementation of the state machine
- Vue.js and Lit for inspiring new
patterns in the machine (
- David Khourshid for talking about state machines long enough to get me started on this project
Edit this page on GitHub