Ark is a headless UI component library that delivers accessible, cross-framework primitives with behavior governed by finite state machines. It provides unstyled components that encapsulate logic and accessibility — including full keyboard navigation, focus management, and WAI-ARIA support — while leaving visual styling entirely to the consumer. Components expose scoped data attributes for CSS targeting and use state machines to produce predictable, testable interactive behavior across every state transition.
The library distinguishes itself through a state propagation model that distributes component state and methods via context, a composition pattern that lets consumers replace rendered elements with custom components through asChild, and a unified collection abstraction for managing hierarchical and flat data sets. It maintains identical APIs and behavioral semantics across React, Solid, Vue, and Svelte, enabling a single design system to work across projects. The same architecture powers additional capabilities such as clipboard management, mount/unmount animations, async data loading with filtering and pagination, AI agent integration via a structured component catalog and styling guidelines, and overlay components with nested dialog and popover support.
The component set covers a broad range of interactive UI patterns: form controls (inputs, select menus, checkboxes, radio groups, date pickers, sliders, color pickers, signature pads), overlays (dialogs, popovers, hover cards, drawers, menus), content display (carousels, accordions, collapsibles, progress indicators, scrollable areas, avatars, QR codes), and data management (listboxes, tree views, pagination, clipboard). The library is published as an npm package and its entire source is available at the Chakra UI monorepo on GitHub.
