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**](https://www.youtube.com/watch?v=I5xEc9t-HZg) ## Motivation In [Chakra UI React](https://chakra-ui.com/), 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](https://vue.chakra-ui.com/) 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](https://egghead.io/courses/statechart-driven-ui-components-with-zag-js-53f85394) 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](https://zagjs.com/discord) ### Twitter To receive updates on new components, enhancements, blog posts, and tips, follow our Twitter account. [Follow us on Twitter](https://twitter.com/zag_js) ## 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/](https://chakra-ui.com/) - Radix UI - [https://www.radix-ui.com/](https://www.radix-ui.com/) - Material Web Components - [https://github.com/material-components/material-components-web](https://github.com/material-components/material-components-web) - React Aria - [https://react-spectrum.adobe.com/react-aria](https://react-spectrum.adobe.com/react-aria) - Goldman Sachs Design System - [https://design.gs.com/](https://design.gs.com/) - Reakit - [https://reakit.io/](https://reakit.io/) - Fast - [https://fast.design/](https://fast.design/) ## Additional Thanks - [Guillermo](https://rauchg.com/2015/pure-ui) for writing a great article that sparked the idea for Zag. - [Open UI](https://open-ui.org/) for inspiring the pattern behind this library - [XState](https://xstate.js.org/) for inspiring the base implementation of the state machine - [Vue.js](https://vuejs.org/) and [Lit](https://lit.dev/) for inspiring new patterns in the machine (`computed` and `watch`) - [David Khourshid](https://twitter.com/DavidKPiano) for talking about state machines long enough to get me started on this project ## What is LLMs.txt? We support [LLMs.txt](https://llmstxt.org/) files for making the Zag JS documentation available to large language models (LLMs). This feature helps AI tools better understand our component library, its APIs, and usage patterns. ## Available Routes We provide several LLMs.txt routes to help AI tools access our documentation: - - Contains a structured overview of all components and their documentation links - - Provides comprehensive documentation including implementation details and examples - - React-specific documentation and implementation details - - SolidJS-specific documentation and implementation details - - Vue-specific documentation and implementation details - - Svelte-specific documentation and implementation details ## Usage with AI Tools ### Cursor Use the `@Docs` feature in Cursor to include the LLMs.txt files in your project. This helps Cursor provide more accurate code suggestions and documentation for Zag JS components. [Read more about @Docs in Cursor](https://docs.cursor.com/context/@-symbols/@-docs) ### Windstatic Reference the LLMs.txt files using `@` or in your `.windsurfrules` files to enhance Windstatic's understanding of Zag JS components. [Read more about Windstatic Memories](https://docs.codeium.com/windsurf/memories#memories-and-rules) ### Other AI Tools Any AI tool that supports LLMs.txt can use these routes to better understand Zag JS. Simply point your tool to any of the routes above based on your framework of choice. ## React ## Solid ## Vue ## Svelte