# zag
**Repository Path**: trusted-list/zag
## Basic Information
- **Project Name**: zag
- **Description**: Build your design system in React, Solid, Vue or Svelte. Powered by finite state machines
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: main
- **Homepage**: http://zagjs.com
- **GVP Project**: No
## Statistics
- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-15
- **Last Updated**: 2026-04-04
## Categories & Tags
**Categories**: Uncategorized
**Tags**: None
## README
# Zag
Finite state machines for accessible JavaScript components
- **Write once, use everywhere 🦄**: The component interactions are modelled in a framework agnostic way. We provide
adapters for JS frameworks like React, Solid, Svelte, or Vue.
- **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.
- **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.
---
## Documentation
To see the documentation, visit [zagjs.com/](https://zagjs.com/)
## Releases
For changelog, Check [CHANGELOG.md](./CHANGELOG.md)
---
## Problem
With the rise of design systems and component-driven development, there's an endless re-implementation of common
component patterns (Tabs, Menu, Modal, etc.) in multiple frameworks.
Most of these implementations seem to be fairly similar in spirit, the differences being around the reactivity and
effects systems for the framework (e.g. `useState`, `useEffect` in React.js). Framework specific solutions tend to grow
in complexity over time and often become hard to understand, debug, improve or test.
## Solution
**Zag** is a JavaScript API that implements common component patterns using the state machine methodology.
### Installation
```sh
npm i --save @zag-js/{component}
# or
yarn add @zag-js/{component}
```
> `{component}` represents any component machine like dialog (`@zag-js/dialog`), tooltip (`@zag-js/tooltip`) , etc.
For framework specific solutions, we provide simple wrappers to help you consume the component state machines.
- ⚛️ `@zag-js/react` - React hooks for consuming machines in React applications
- 💚 `@zag-js/vue` - Vue composition for consuming machines in Vue applications
- 🎷 `@zag-js/solid` - Solid.js utilities for consuming machines in Solid.js applications
- 🎷 `@zag-js/svelte` - Svelte utilities for consuming machines in Svelte applications
## Usage
```jsx
import { normalizeProps, useMachine } from "@zag-js/react"
import * as toggle from "@zag-js/toggle-group"
import { useId } from "react"
export function ToggleGroup() {
const service = useMachine(toggle.machine({ id: useId() }))
const api = toggle.connect(service, normalizeProps)
return (
