Ark UI

Ark UI provides over 45+ headless components for building design systems. Available components include:

• Accordion
• Avatar
• Carousel
• Checkbox
• Clipboard
• Collapsible
• Color Picker
• Combobox
• Date Picker
• Dialog
• Editable
• Field
• Fieldset
• File Upload
• Hover Card
• Menu
• Number Input
• Pagination
• Pin Input
• Popover
• Progress (Circular and Linear)
• QR Code
• Radio Group
• Rating Group
• Segment Group
• Select
• Signature Pad
• Slider
• Splitter
• Switch
• Tabs
• Tags Input
• Timer
• Toast
• Toggle Group
• Tooltip
• Tree View

Ark UI is a headless, accessible component library that provides unstyled UI primitives (e.g., modals, avatars, accordions). Because it ships without predefined styles, you can implement your own design system using two primary approaches:

• Vanilla CSS: Design components using CSS by leveraging Ark UI's anatomy.
• Panda CSS: Use a zero-runtime styling engine with recipes and design tokens for scalable styles.

Core Concept: Recipes

A recipe is a concept where styles for each component part and its variants (such as size, shape, or visual style) are bundled into a single, reusable definition. This helps create consistent, modular, and scalable components.

The Ark UI MCP Server is a Model Context Protocol (MCP) server that allows AI agents (like Claude Code, Cursor, and Copilot) to build design system components using Ark UI. It provides AI agents with full knowledge of available components, usage patterns, and styling guidelines across React, Vue, Solid, and Svelte.

It exposes the following tools to AI agents:

• list_components: Returns a full list of all available components.
• list_examples: Lists various component examples.
• get_example: Retrieves code examples and usage patterns.
• styling_guide: Provides styling guidelines for components, including data attributes and CSS variables.

Ark UI is a headless component library designed to provide complex, interactive, and accessible user interface components across multiple JavaScript frameworks (React, Solid, Vue, and Svelte).

Unlike traditional UI libraries tied to a single framework, Ark UI is built on top of Zag.js, which uses Finite State Machines to manage component logic. This architecture allows Ark UI to maintain consistent behavior and accessibility standards while being usable in diverse technology stacks.

The Presence component helps control the rendering and unmounting of child content based on a present state.

By default, the child component starts as hidden and remains hidden even after the present state is toggled off. This behavior is ideal for elements that should be hidden initially and stay hidden once their presence is no longer required.

// Basic usage pattern
<Presence present={isPresent}>
  <YourChildComponent />
</Presence>

A tree collection manages hierarchical data structures like file systems, navigation menus, or organization charts. It provides methods for traversing, manipulating, and querying tree structures.

Note: Tree collections are immutable. All modification methods (like insertAfter, remove, move, or replace) return a new tree instance rather than modifying the original.

import { createTreeCollection } from '@ark-ui/react/collection'

const treeData = {
  value: 'root',
  label: 'Root',
  children: [
    {
      value: 'folder1',
      label: 'Folder 1',
      children: [
        { value: 'file1', label: 'File 1.txt' },
        { value: 'file2', label: 'File 2.txt' },
      ],
    },
  ],
}

const tree = createTreeCollection({ rootNode: treeData })

The SignaturePad component follows a compound component pattern. To build a complete signature pad interface, you should compose the following parts within a SignaturePad.Root provider:

• SignaturePad.Root: The main provider that manages the signature state.
• SignaturePad.Label: An accessible label for the signature area.
• SignaturePad.Control: A container for signature-related controls.
• SignaturePad.Segment: The actual drawing area where users provide their signature.
• SignaturePad.ClearTrigger: A button to clear the current signature.
• SignaturePad.Guide: An optional visual guide (e.g., a line) to assist the user in signing.

<SignaturePad.Root>
  <SignaturePad.Label />
  <SignaturePad.Control>
    <SignaturePad.Segment />
    <SignaturePad.ClearTrigger />
    <SignaturePad.Guide />
  </SignaturePad.Control>
</SignaturePad.Root>

The NumberInput.Scrubber component enables a 'drag-to-change' interaction. It uses the Pointer Lock API to track movement for smooth value adjustments.

Note: The scrubber is automatically disabled in Safari to prevent layout shifts, and browsers may show a notification when the Pointer Lock API is activated.

<NumberInput.Root>
  <NumberInput.Scrubber />
  <NumberInput.Input />
</NumberInput.Root>

Ark UI provides three distinct patterns for managing and accessing component state. Choose based on your specific architectural needs:

The Checkbox.Group component manages a collection of checkboxes. It tracks which values are currently selected and provides a unified way to interact with the group. You can wrap multiple Checkbox.Root components inside a Checkbox.Group to manage them as a single unit.

<Checkbox.Group>
  <Checkbox.Root>
    <Checkbox.Control>
      <Checkbox.Indicator />
    </Checkbox.Control>
    <Checkbox.Label />
    <Checkbox.HiddenInput />
  </Checkbox.Root>
</Checkbox.Group>