{"id":13432964,"url":"https://github.com/chakra-ui/zag","last_synced_at":"2026-04-11T20:07:07.889Z","repository":{"id":36998611,"uuid":"383777434","full_name":"chakra-ui/zag","owner":"chakra-ui","description":"Build your design system in React, Solid, Vue or Svelte. Powered by finite state machines","archived":false,"fork":false,"pushed_at":"2026-04-05T19:01:10.000Z","size":88049,"stargazers_count":5037,"open_issues_count":6,"forks_count":247,"subscribers_count":16,"default_branch":"main","last_synced_at":"2026-04-05T20:35:31.409Z","etag":null,"topics":["a11y","accessibility","agnostic","component","design-systems","headless","headlessui","library","primitives","react","solid","state-machines","svelte","sveltejs","ui","ui-components","ui-kit","universal","vue","xstate"],"latest_commit_sha":null,"homepage":"http://zagjs.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chakra-ui.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":"AGENTS.md","dco":null,"cla":null},"funding":{"patreon":"segunadebayo","open_collective":"chakra-ui","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"custom":null}},"created_at":"2021-07-07T11:38:07.000Z","updated_at":"2026-04-05T19:01:13.000Z","dependencies_parsed_at":"2023-09-29T17:48:29.275Z","dependency_job_id":"d52a6337-1512-4cb4-b474-eea83bb6f3bf","html_url":"https://github.com/chakra-ui/zag","commit_stats":{"total_commits":3714,"total_committers":81,"mean_commits":"45.851851851851855","dds":0.3982229402261712,"last_synced_commit":"c664689b9324d09319fd41d11f9b375e6fd428cb"},"previous_names":["chakra-ui/ui-machines"],"tags_count":17365,"template":false,"template_full_name":null,"purl":"pkg:github/chakra-ui/zag","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chakra-ui%2Fzag","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chakra-ui%2Fzag/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chakra-ui%2Fzag/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chakra-ui%2Fzag/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chakra-ui","download_url":"https://codeload.github.com/chakra-ui/zag/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chakra-ui%2Fzag/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31689762,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-11T13:07:20.380Z","status":"ssl_error","status_checked_at":"2026-04-11T13:06:47.903Z","response_time":54,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a11y","accessibility","agnostic","component","design-systems","headless","headlessui","library","primitives","react","solid","state-machines","svelte","sveltejs","ui","ui-components","ui-kit","universal","vue","xstate"],"created_at":"2024-07-31T02:01:19.099Z","updated_at":"2026-04-11T20:07:07.871Z","avatar_url":"https://github.com/chakra-ui.png","language":"TypeScript","readme":"\u003ca href=\"https://zagjs.com/\" \u003e\n  \u003cimg alt=\"Zag.js hero image\" src=\"https://repository-images.githubusercontent.com/383777434/87c5d462-1c65-45d7-9561-3f3f64d814f4\"\u003e\u003c/img\u003e\n\u003c/a\u003e\n\n# Zag\n\n\u003cp\u003e\n  \u003cimg alt=\"NPM Downloads\" src=\"https://img.shields.io/npm/dm/@zag-js/core.svg?style=flat\"/\u003e\n  \u003cimg alt=\"Github Stars\" src=\"https://badgen.net/github/stars/chakra-ui/zag\" /\u003e\n  \u003ca href=\"https://zagjs.com/discord\"\u003e\n    \u003cimg alt=\"Discord\" src=\"https://img.shields.io/discord/660863154703695893.svg?label=\u0026logo=discord\u0026logoColor=ffffff\u0026color=7389D8\u0026labelColor=6A7EC2\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\nFinite state machines for accessible JavaScript components\n\n- **Write once, use everywhere 🦄**: The component interactions are modelled in a framework agnostic way. We provide\n  adapters for JS frameworks like React, Solid, Svelte, or Vue.\n- **Focus on accessibility ♿️**: Zag is built with accessibility in mind. We handle many details related to keyboard\n  interactions, focus management, aria roles and attributes.\n- **Headless ✨**: The machine APIs are completely unstyled and gives you the control to use any styling solution you\n  prefer.\n- **Powered by state machines 🌳**: Zag is built on top of the latest ideas in Statecharts. We don't follow the SCXML\n  specifications, but we've created an API that we think will help us build more complex components fast.\n\n---\n\n## Documentation\n\nTo see the documentation, visit [zagjs.com/](https://zagjs.com/)\n\n## Releases\n\nFor changelog, Check [CHANGELOG.md](./CHANGELOG.md)\n\n---\n\n## Problem\n\nWith the rise of design systems and component-driven development, there's an endless re-implementation of common\ncomponent patterns (Tabs, Menu, Modal, etc.) in multiple frameworks.\n\nMost of these implementations seem to be fairly similar in spirit, the differences being around the reactivity and\neffects systems for the framework (e.g. `useState`, `useEffect` in React.js). Framework specific solutions tend to grow\nin complexity over time and often become hard to understand, debug, improve or test.\n\n## Solution\n\n**Zag** is a JavaScript API that implements common component patterns using the state machine methodology.\n\n### Installation\n\n```sh\nnpm i --save @zag-js/{component}\n\n# or\n\nyarn add @zag-js/{component}\n```\n\n\u003e `{component}` represents any component machine like dialog (`@zag-js/dialog`), tooltip (`@zag-js/tooltip`) , etc.\n\nFor framework specific solutions, we provide simple wrappers to help you consume the component state machines.\n\n- ⚛️ `@zag-js/react` - React hooks for consuming machines in React applications\n- 💚 `@zag-js/vue` - Vue composition for consuming machines in Vue applications\n- 🎷 `@zag-js/solid` - Solid.js utilities for consuming machines in Solid.js applications\n- 🎷 `@zag-js/svelte` - Svelte utilities for consuming machines in Svelte applications\n\n## Usage\n\n```jsx\nimport { normalizeProps, useMachine } from \"@zag-js/react\"\nimport * as toggle from \"@zag-js/toggle-group\"\nimport { useId } from \"react\"\n\nexport function ToggleGroup() {\n  const service = useMachine(toggle.machine({ id: useId() }))\n  const api = toggle.connect(service, normalizeProps)\n\n  return (\n    \u003cdiv {...api.getRootProps()}\u003e\n      \u003cbutton {...api.getItemProps({ value: \"bold\" })}\u003eB\u003c/button\u003e\n      \u003cbutton {...api.getItemProps({ value: \"italic\" })}\u003eI\u003c/button\u003e\n      \u003cbutton {...api.getItemProps({ value: \"underline\" })}\u003eU\u003c/button\u003e\n    \u003c/div\u003e\n  )\n}\n```\n\n---\n\n## Guiding Principles\n\n- All component machines and tests are modelled according to the\n  [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices/)\n- Write end-to-end tests for every component based on the WAI-ARIA spec. **Regardless of the framework, users expect\n  component patterns to work the same way!**\n- All machines should be light-weight, simple, and easy to understand. Avoid using complex machine concepts like spawn,\n  nested states, etc.\n\n---\n\n## Fun Facts\n\n**Zag** means to _take a sharp change in direction_. This clearly describes our approach of using state machines to\npower the logic behind UI components.\n\n### Teasers\n\n- When you see someone using classic react, vue, solid or svelte to build an interactive UI component that exists in\n  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---\n\n## Commands\n\n### Build commands\n\nOur build is managed with esbuild and turborepo to provide fast, concurrent builds across the packages.\n\n- `build` : Build the CJS, ESM and DTS files. This is the actual production build that we run in the CI.\n\n### Examples\n\nSince zag is framework agnostic, we need a way to test it within a framework. The `examples/` directory includes starter\nprojects for the frameworks we support.\n\n- `start-react` : Starts the Next.js TypeScript project\n- `start-vue` : Starts the Vue 3 TypeScript project\n- `start-solid` : Starts the Solid TypeScript project\n- `start-svelte` : Starts the Svelte TypeScript project\n\n### E2E Tests\n\nWe've setup end-to-end tests for every machine we built. We use [Playwright](https://playwright.dev/) for testing and we\nensure that the component works the same way regardless of the framework.\n\n- `e2e-react` : Starts the E2E tests for the React project\n- `e2e-vue` : Starts the E2E tests for the Vue project\n- `e2e-solid` : Starts the E2E tests for the Solid project\n\n### Contributing new machines/features\n\n- `generate-machine` : Generates a new machine package in the `packages/` directory. It sets up the required files and\n  structure for new machine.\n- `generate-util` : Generates a new utility package in the `packages/utilities` directory.\n\n### Other commands\n\n- `test` : Run the tests for all packages\n- `lint` : Lint all packages\n\n### Website\n\n- `start-website`: Starts the website\n\n---\n\n## Inspirations\n\n- Duplicate code in Chakra UI [React](https://chakra-ui.com/) and [Vue](https://vue.chakra-ui.com/) 😅\n- [Thoughts on Pure UI](https://rauchg.com/2015/pure-ui) - Guillermo Rauch\n- [Pure UI Control](https://asolove.medium.com/pure-ui-control-ac8d1be97a8d) - Adam Solve\n- [Material Components Web](https://github.com/material-components/material-components-web) for inspiring my first\n  prototype\n- [Radix UI](https://radix-ui.com/) for inspiring the dimissable and presence pattern\n- [XState](https://xstate.js.org/) for inspiring the base implementation of the state machine\n- [Vue.js](https://vuejs.org/) and [Lit](https://lit-element.polymer-project.org/) for inspiring new patterns in the\n  machine (`computed` and `watch`)\n- [Sonner](https://sonner.emilkowal.ski/toaster) for inspiring the toast machine\n\n---\n\n## Contributions\n\nLooking to contribute? Look for the **Good First Issue** label.\n\n### 🐛 Bugs\n\nPlease file an issue for bugs, missing documentation, or unexpected behavior.\n\n### 💡 Feature Requests\n\nPlease file an issue to suggest new features. Vote on feature requests by adding a 👍. This helps maintainers prioritize\nwhat to work on.\n\n---\n\n## License\n\nMIT © [Chakra Systems Inc.](https://github.com/chakra-ui)\n","funding_links":["https://patreon.com/segunadebayo","https://opencollective.com/chakra-ui"],"categories":["TypeScript","vue"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchakra-ui%2Fzag","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchakra-ui%2Fzag","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchakra-ui%2Fzag/lists"}