{"slug":"introduction","title":"Introduction","description":"The why and the what behind Zag","contentType":"overview","content":"Zag is a framework agnostic toolkit for implementing complex, interactive, and\naccessible UI components in your design system and web applications. Works for\nReact, Solid and Vue.\n\n> Zag is part of the next evolution of Chakra UI, and one of the four arms of\n> the future of Chakra UI.\n> [**Watch the talk here**](https://www.youtube.com/watch?v=I5xEc9t-HZg)\n\n<a href=\"https://www.youtube.com/watch?v=I5xEc9t-HZg\">\n  <Image src=\"/lee-rob-interview.png\" width=\"640\" height=\"210\" />\n</a>\n\n## Motivation\n\nIn [Chakra UI React](https://chakra-ui.com/), we've experienced too many hiccups\nand bugs in the past related to how we coordinate events, manage state, and side\neffects. Most these bugs are associated with the orchestration within\n`useEffect`, `useMemo`, `useCallback`, etc.\n\nThese issues were replicated in our [Chakra UI Vue](https://vue.chakra-ui.com/)\npursuit as well, and created a maintenance hell for us. We're grateful for this\nexperience because it made us take a step back to define how we would like to\nbuild components in the future.\n\nWe believe that most widgets should function the same way regardless of the\nframework they're built with. That's why we built Zag.\n\n> Don't re-invent the wheel, **let the machines do the work 😊**\n\n## Why Zag?\n\n- **Powered by state machines 🌳**: Zag is built on top of the latest ideas in\n  Statecharts. We don't follow the SCXML specifications, but we've created an\n  API that we think will help us build more complex components fast.\n\n- **Write once, use everywhere 🦄**: The component interactions are modelled in\n  a framework agnostic way. We provide adapters for JS frameworks so you can use\n  it in React, Solid, or Vue 3.\n\n- **Focus on accessibility ♿️**: Zag is built with accessibility in mind. We\n  handle many details related to keyboard interactions, focus management, aria\n  roles and attributes.\n\n- **Headless ✨**: The machine APIs are completely unstyled and gives you the\n  control to use any styling solution you prefer.\n\n- **Incremental adoption ✨**: Adopt the machines as you need them. Each\n  component machine is an NPM package and can be installed individually so you\n  can use them incrementally.\n\n## Learn\n\n[Watch the course](https://egghead.io/courses/statechart-driven-ui-components-with-zag-js-53f85394)\non Egghead to learn how to build statechart-driven UI components with Zag.js.\n\nThis course will give you a deep dive into how Zag works and how you can use it\nto build complex UI components.\n\n<a href=\"https://egghead.io/courses/statechart-driven-ui-components-with-zag-js-53f85394\">\n  <Image src=\"/og-banner-zag-course.png\" width=\"640\" height=\"210\" />\n</a>\n\n## Fun Facts\n\n**Zag** means to _take a sharp change in direction_. This clearly describes our\napproach of using state machines to power the logic behind UI components.\n\n### Teasers\n\n- When you see someone using classic react, vue or solid to build an interactive\n  UI component that exists in Zag, tell them to **\"zag it!\"** ⚡️\n\n- Anyone using Zag will be called a **\"zagger\"** 💥\n\n- The feeling you get when you use Zag will be called **\"zagadat!\"** 🚀\n\n- The Zag community will be called **\"zag nation\"** 🔥\n\n## Community\n\n### Discord\n\nTo get involved with the Zag community, ask questions, and chat with the\nmaintainers, join our Discord.\n\n[Join our Discord](https://zagjs.com/discord)\n\n### Twitter\n\nTo receive updates on new components, enhancements, blog posts, and tips, follow\nour Twitter account.\n\n[Follow us on Twitter](https://twitter.com/zag_js)\n\n## Prior art\n\nWe strongly believe in open source and the power of open collaboration. In the\npast, we've been inspired by other meaningful projects and amazing people who\nhave inspire(d) us to keep improving our ideas.\n\nSome of the projects we've been inspired by include:\n\n- Chakra UI - [https://chakra-ui.com/](https://chakra-ui.com/)\n- Radix UI - [https://www.radix-ui.com/](https://www.radix-ui.com/)\n- Material Web Components -\n  [https://github.com/material-components/material-components-web](https://github.com/material-components/material-components-web)\n- React Aria -\n  [https://react-spectrum.adobe.com/react-aria](https://react-spectrum.adobe.com/react-aria)\n- Goldman Sachs Design System - [https://design.gs.com/](https://design.gs.com/)\n- Reakit - [https://reakit.io/](https://reakit.io/)\n- Fast - [https://fast.design/](https://fast.design/)\n\n## Additional Thanks\n\n- [Guillermo](https://rauchg.com/2015/pure-ui) for writing a great article that\n  sparked the idea for Zag.\n- [Open UI](https://open-ui.org/) for inspiring the pattern behind this library\n- [XState](https://xstate.js.org/) for inspiring the base implementation of the\n  state machine\n- [Vue.js](https://vuejs.org/) and [Lit](https://lit.dev/) for inspiring new\n  patterns in the machine (`computed` and `watch`)\n- [David Khourshid](https://twitter.com/DavidKPiano) for talking about state\n  machines long enough to get me started on this project","editUrl":"https://github.com/chakra-ui/zag/edit/main/website/data/overview/introduction.mdx"}