Zag

Overview

Zag is a JavaScript API that implements common component patterns using the state machine methodology. It focuses on accessibility, providing adapters for JS frameworks like React, Solid, or Vue. Zag is built on top of the latest ideas in Statecharts, giving developers the control to use any styling solution they prefer. With Zag, developers can avoid the endless re-implementation of common component patterns in multiple frameworks and benefit from lightweight, simple, and easy-to-understand machines.

Features

• Write once, use everywhere: The component interactions are modelled in a framework agnostic way, allowing developers to reuse code across different frameworks.
• Focus on accessibility: Zag is built with accessibility in mind, handling keyboard interactions, focus management, aria roles and attributes to ensure components are accessible.
• Headless: The machine APIs are completely unstyled, giving developers the freedom to use any styling solution they prefer.
• Powered by state machines: Zag is built on the latest ideas in Statecharts, providing a solid foundation for building complex components quickly.

Installation

To install Zag, follow these steps:

1. Install the desired component machine using npm: npm install {component}

   • Example: npm install @zag-js/dialog

2. If you are using a framework-specific solution, install the corresponding wrapper package:

   • React: npm install @zag-js/react
   • Vue: npm install @zag-js/vue
   • Solid: npm install @zag-js/solid

Summary

Zag is a JavaScript API that aims to simplify the implementation of common component patterns in multiple frameworks. By leveraging state machine methodology, Zag provides a framework-agnostic solution that focuses on accessibility and gives developers the flexibility to use any styling solution they prefer. With lightweight and easy-to-understand machines, Zag allows developers to build complex components quickly and efficiently.