# Ark UI — Unstyled Accessible Components for Any Design System

> A headless, accessible UI component library built by the Chakra UI team, supporting React, Vue, Solid, and Svelte with zero styling opinions.

## Install

Save as a script file and run:

# Ark UI — Unstyled Accessible Components for Any Design System

## Quick Use
```bash
npm install @ark-ui/react
```
```tsx
import { Dialog } from '@ark-ui/react';
export default () => (
  <Dialog.Root>
    <Dialog.Trigger>Open</Dialog.Trigger>
    <Dialog.Backdrop />
    <Dialog.Positioner><Dialog.Content>Hello</Dialog.Content></Dialog.Positioner>
  </Dialog.Root>
);
```

## Introduction
Ark UI is a headless component library from the Chakra UI team that provides accessible, unstyled primitives for building design systems. It handles complex interaction patterns — dialogs, menus, date pickers, sliders — so you only need to add your own styles.

## What Ark UI Does
- Provides 45+ accessible component primitives including Dialog, Menu, Tabs, Select, and DatePicker
- Ships unstyled so you apply your own CSS, Tailwind, Panda CSS, or any styling solution
- Implements WAI-ARIA patterns with keyboard navigation and screen reader support
- Supports React, Vue, Solid, and Svelte through dedicated framework packages
- Uses state machines internally for predictable, bug-free interaction behavior

## Architecture Overview
Ark UI is built on Zag.js, a framework-agnostic state machine library. Each component (e.g., Dialog, Accordion, Menu) is modeled as a finite state machine that manages open/close states, focus traps, keyboard interactions, and ARIA attributes. Framework adapters translate these state machines into hooks or composables. The component API uses a compound component pattern with dot notation (Dialog.Root, Dialog.Trigger, Dialog.Content).

## Self-Hosting & Configuration
- Install the adapter for your framework: `@ark-ui/react`, `@ark-ui/vue`, `@ark-ui/solid`, or `@ark-ui/svelte`
- Import individual components and compose them using the dot notation API
- Style with any CSS approach — Tailwind, CSS Modules, Panda CSS, vanilla CSS
- Use the `asChild` prop to render your own element while preserving behavior
- Pair with Park UI for a pre-styled theme built on Ark UI and Panda CSS

## Key Features
- 45+ production-ready accessible component primitives
- Compound component API with clear, composable structure
- State machine internals for predictable interaction behavior
- Framework-agnostic core supports React, Vue, Solid, and Svelte
- Full control over rendering via the asChild composition pattern

## Comparison with Similar Tools
- **Radix UI** — React-only unstyled primitives; Ark UI supports four frameworks
- **Headless UI** — limited component set by Tailwind Labs; Ark UI offers 45+ primitives
- **React Aria** — Adobe's React hooks for accessibility; Ark UI provides ready-made components
- **Melt UI** — Svelte-only headless components; Ark UI supports Svelte plus three other frameworks
- **Kobalte** — SolidJS-only primitives; Ark UI covers Solid as well as React, Vue, and Svelte

## FAQ
**Q: How is Ark UI related to Chakra UI?**
A: Ark UI is the headless primitive layer created by the same team. Chakra UI v3 is built on top of Ark UI.

**Q: Can I use it with Tailwind CSS?**
A: Yes. Ark UI ships unstyled, so you apply Tailwind classes directly to component parts.

**Q: What is the asChild prop?**
A: It lets you replace the default rendered element with your own component while keeping all behavior and accessibility attributes.

**Q: Is it production-ready?**
A: Yes. It powers Chakra UI v3 and is used in production design systems.

## Sources
- https://github.com/chakra-ui/ark
- https://ark-ui.com

---
Source: https://tokrepo.com/en/workflows/asset-6846b4cf
Author: Script Depot