ark-ui

What problem does it solve?

Build, refactor, debug, and review React UI code that uses Ark UI via @ark-ui/react or @ark-ui/react/*. Use when Codex must choose the right React Ark component, collection helper, or utility; preserve part anatomy and accessibility contracts; compose with asChild, Portal, Presence, or EnvironmentProvider; style parts with data-scope, data-part, CSS variables, and state data-* attributes; wire Field or Fieldset; work with createListCollection, useAsyncList, useListSelection, or createTreeCollection; or handle React Ark surfaces such as dialogs, menus, selects, comboboxes, date pickers, file upload, image cropper, tree view, splitter, toast, tour, locale, download, focus trap, formatting, and related utilities.

Core Features & Use Cases

• Use Ark UI to own interaction logic, ARIA wiring, focus rules, and structural data attributes; preserve app-specific styling or state only where the surrounding code requires it.
• Read overview-and-setup.md before changing installation, imports, or the core Ark mental model.
• Read composition-and-refs.md before using asChild, wrapping parts in design-system components, sharing ids, or forwarding refs.
• Read styling.md before styling Ark parts with CSS, Panda CSS, Tailwind CSS, or state data attributes.
• Read state-management.md before reading inline state with Component.Context, calling use*Context, or controlling a component from outside its subtree.
• Read animation-and-presence.md before coordinating entry and exit animation, present, lazyMount, unmountOnExit, or Presence.
• Read forms.md before wiring Field, Fieldset, validation, accessible labels, or React Hook Form.
• Read collection-lists-and-async.md before managing flat option lists or remote collection data.
• Read list-selection.md before managing independent list selection state, multi-select behavior, or range-like selection flows outside a built-in Ark component.
• Read tree-collection.md before editing hierarchical collections, traversal, filtering, or tree mutations.
• Read overlays-and-transient-ui.md before editing dialogs, popovers, menus, hover cards, tooltips, tours, floating panels, or toast flows.
• Read selection-and-picker-components.md before editing selects, comboboxes, listboxes, tags input, date pickers, color pickers, file upload, signature pad, image cropper, or tree view.
• Read form-and-value-components.md before editing checkbox-like controls, toggles, rating, sliders, numeric inputs, pin inputs, password inputs, editable text, or timer components.
• Read structure-navigation-and-feedback.md before editing disclosure, navigation, viewport, progress, clipboard, avatar, QR, or marquee behavior.
• Read utilities-and-runtime.md before editing client-only rendering, download, environment, focus trap, formatting, frame, highlight, locale, JSON tree view, or swap behavior.

Quick Start

Identify the correct Ark UI surface for a React project and implement its integration in one pass.