chakra-ui/ark

A headless library for building reusable, scalable design systems that works for a wide range of JS frameworks.

Summary

Ark UI is a headless component library that provides accessible, unstyled UI primitives for React, Vue, Solid, and Svelte with a consistent API. Behavior, ARIA wiring, and keyboard interaction are handled by Zag.js state machines, so engineers apply their own styling instead of rebuilding focus traps or open/close logic.

What it is useful for

Ark UI fits when a team needs a design system but does not want a styled component library imposing visual decisions. Each component returns plain DOM with attributes and event hooks; styles come from the consumer using Tailwind, Panda CSS, vanilla CSS, CSS Modules, or CSS-in-JS such as Emotion or Styled Components. It is also useful when the same components must run across multiple frameworks, since the README describes the API as identical across React, Solid, Vue, and Svelte. The library bundles over 45 components covering forms (Select, Combobox, Date Picker, Slider, Switch, Pin Input), overlays (Dialog, Popover, Tooltip, Hover Card, Bottom Sheet), navigation (Tabs, Accordion, Menu, Tree View, Pagination), and utilities (Toast, Carousel, Clipboard, Scroll Area, Focus Trap). Accessibility is built in: components follow WAI-ARIA patterns, support keyboard navigation and focus management, include screen reader announcements, and ship RTL support. Adopted projects listed in the README include Chakra UI v3, Park UI, and Tark UI.

How engineers can use it

Install the package for your framework as documented:

npm install @ark-ui/react
# or
npm install @ark-ui/solid
npm install @ark-ui/vue
npm install @ark-ui/svelte

A component is composed from granular parts. A Dialog in React looks like:

import { Dialog } from '@ark-ui/react/dialog'

export const MyDialog = () => (
  <Dialog.Root>
    <Dialog.Trigger>Open Dialog</Dialog.Trigger>
    <Dialog.Backdrop />
    <Dialog.Positioner>
      <Dialog.Content>
        <Dialog.Title>Dialog Title</Dialog.Title>
        <Dialog.Description>Dialog description</Dialog.Description>
        <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
      </Dialog.Content>
    </Dialog.Positioner>
  </Dialog.Root>
)

The same structure works in Vue, Solid, and Svelte by swapping the import path. Styling is applied per element, for example className="px-4 py-2 bg-blue-500 rounded" on Dialog.Trigger, or via any CSS strategy. The README points to ark-ui.com for full API references, recipes, and TypeScript patterns, which is where to look for component-by-component props and state hooks. The project is licensed under MIT.