Introduction to Zag

Zag is a framework agnostic toolkit for implementing complex, interactive, and accessible UI components in your design system and web applications. Works for React, Solid and Vue.

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

Motivation

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 useEffect, useMemo, useCallback, etc.

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 😊

Why Zag?

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.

Learn

Watch the course on Egghead to learn how to build statechart-driven UI components with Zag.js.

This course will give you a deep dive into how Zag works and how you can use it to build complex UI components.

Fun Facts

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.

Teasers

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" 🔥

Community

Discord

To get involved with the Zag community, ask questions, and chat with the maintainers, join our Discord.

Join our Discord

Twitter

To receive updates on new components, enhancements, blog posts, and tips, follow our Twitter account.

Prior art

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

Additional Thanks

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 (computed and watch)
David Khourshid for talking about state machines long enough to get me started on this project

Edit this page on GitHub