zag

Finite state machines for accessible JavaScript components

Key Features

• Framework Agnostic: Component interactions are modeled in a framework-agnostic way, with adapters for React, Solid, Vue, and Svelte.
• Accessibility-First: Built with accessibility in mind, handling keyboard interactions, focus management, and ARIA attributes.
• Headless: Unstyled APIs give full control over styling solutions.
• State Machine Powered: Uses modern Statecharts concepts for building complex components efficiently.

Purpose

Zag solves the problem of re-implementing common component patterns (like Tabs, Menu, Modal) across different frameworks by providing a single, reusable JavaScript API based on state machines.

Target Audience

• Developers building design systems or component libraries.
• Teams working with multiple frameworks (React, Solid, Vue, Svelte).
• Those prioritizing accessibility and consistent behavior across components.

Supported Frameworks

Includes adapters for:

• ⚛️ React (@zag-js/react)
• 💚 Vue (@zag-js/vue)
• � Solid (@zag-js/solid)
• (Svelte support implied by framework-agnostic nature)

Documentation

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

Inspirations

Draws from Chakra UI, XState, Radix UI, and Material Components Web, with a focus on unifying component logic across frameworks.

Contributions

Open for community contributions, especially labeled "Good First Issue".

License: MIT © Segun Adebayo fa-solid fa-up-right-from-square