@zag-js/vue

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 · Getting started · Changelog · 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.
• 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:

npm install @zag-js/toggle-group @zag-js/react

Connect the machine to your markup:

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 (
    <div {...api.getRootProps()}>
      <button {...api.getItemProps({ value: "bold" })} aria-label="Bold">
        B
      </button>
      <button {...api.getItemProps({ value: "italic" })} aria-label="Italic">
        I
      </button>
      <button {...api.getItemProps({ value: "underline" })} aria-label="Underline">
        U
      </button>
    </div>
  )
}

Add your styles, then explore the toggle group docs for the full API and examples in other frameworks.

Contributing

Bug reports, documentation improvements, and new component ideas are welcome. Read the contributing guide for local setup, development commands, and how to submit changes.

Acknowledgments

Zag grew out of building Chakra UI and draws inspiration from Pure UI, Pure UI Control, Material Components Web, Radix UI, XState, Vue, Lit, and Sonner.

License

MIT © Chakra Systems Inc.