zag

Finite state machines for accessible JavaScript components.

• Framework Agnostic: Write component interactions once and use them across multiple frameworks with provided adapters (React, Vue, Solid, etc.).
• Accessibility Focus: Built with keyboard interactions, focus management, and ARIA attributes in mind.
• Headless: Unstyled APIs give full control over styling solutions.
• State Machine Powered: Uses modern Statecharts concepts for building complex components efficiently.

Key Features

• Cross-Framework Support: Includes adapters for React, Vue, and Solid.js (Svelte support is not mentioned explicitly).
• WAI-ARIA Compliant: Follows accessibility best practices for consistent behavior.
• Lightweight & Simple: Avoids overly complex state machine patterns for ease of understanding.

Target Audience

• Developers building reusable, accessible UI components.
• Teams working with multiple JavaScript frameworks who want consistent component logic.
• Those who prefer headless solutions with their own styling systems.

Documentation

Visit zagjs.com/ fa-solid fa-up-right-from-square for detailed documentation.

Example Usage (React)

import { useMachine } from "@zag-js/react";
import * as toggle from "@zag-js/toggle-group";

function ToggleGroup() {
  const [state, send] = useMachine(toggle.machine({ id: "1" }));
  const api = toggle.connect(state, send);
  return <button {...api.getToggleProps()}>Toggle</button>;
}

Principles

1. Strict adherence to WAI-ARIA authoring practices.
2. Comprehensive end-to-end testing for cross-framework consistency.
3. Simplicity in machine design.

Notable Inspirations

• Chakra UI's multi-framework implementations
• XState for state machine patterns
• Radix UI for dismissible component patterns

For contributions, see GitHub issues labeled Good First Issue. Licensed under MIT.