# Zag
Accessible component logic for React, Vue, Solid, and Svelte.
Build dialogs, menus, comboboxes, date pickers, and more with state machines that handle keyboard interactions, focus
management, and ARIA attributes. You control the markup and styling; Zag handles the behavior.
[Documentation](https://zagjs.com/) · [Getting started](https://zagjs.com/overview/installation) ·
[Changelog](./CHANGELOG.md) · [Discord](https://zagjs.com/discord)
## Why Zag?
- **Bring your own design.** Headless APIs give you control over the rendered elements and any styling solution.
- **Reuse behavior across frameworks.** The same component machines power React, Vue, Solid, and Svelte, with adapters
for Preact and vanilla JavaScript too.
- **Build on accessible interactions.** Keyboard navigation, focus management, and ARIA behavior follow the
[WAI-ARIA authoring practices](https://www.w3.org/WAI/ARIA/apg/).
- **Make complex behavior predictable.** State machines describe how components respond to interactions, with Playwright
tests checking behavior across frameworks.
## Quick start
Install a component machine and the adapter for your framework. For a React toggle group:
```sh
npm install @zag-js/toggle-group @zag-js/react
```
Connect the machine to your markup:
```tsx
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 (
