Ark UI

Overview

Ark UI is a headless component library built on Zag.js state machines, created by the Chakra UI team. It provides unstyled, accessible UI primitives for React, Vue, and Solid — making it one of the most versatile headless component libraries available. Each component’s behavior is driven by a state machine, ensuring predictable and correct interactions.

The state machine approach means that complex component behaviors (like combobox filtering, date picker navigation, or drag-and-drop) are modeled as finite state machines. This architecture makes components more reliable and easier to debug, while the headless rendering layer gives you full control over markup and styling.

When to Use

Ark UI is the right choice when you need headless components across multiple frameworks, when you value the predictability of state machine-driven interactions, or when building a design system that needs to work with React, Vue, and Solid simultaneously.

Getting Started

npm install @ark-ui/react

import { Slider } from "@ark-ui/react";

function MySlider() {
  return (
    <Slider.Root min={0} max={100} defaultValue={[50]}>
      <Slider.Label>Volume</Slider.Label>
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb index={0} />
      </Slider.Control>
    </Slider.Root>
  );
}