ark-ui

Ark UI

Ark UI is a headless / unstyled component library based on Zag.js, and is also the headless implementation foundation for Chakra UI v3. It supports React / Solid / Vue / Svelte.

How to choose between Ark UI and Chakra UI — Ark UI provides only unstyled behavior and accessibility as primitives (asChild to connect to any element or design system), while Chakra UI v3 is a styled implementation built on the same Zag.js foundation. If you want to manually apply styles to an existing design system, use this skill; if you want to use Chakra's styling system as is, see skills/chakra-ui/ .

Directory Structure

skills/ark-ui/
  SKILL.md
  references/
    overview/
      README.md
      about.md
      getting-started.md
      changelog.md
      framework-differences.md
      mcp-server.md
      llms-txt.md
    guides/
      README.md
      styling.md
      composition.md
      component-state.md
      animation.md
      forms.md
      ref.md
    collections/
      README.md
      list-collection.md
      tree-collection.md
      async-list.md
      list-selection.md
    components/
      form/
        README.md
        checkbox.md
        field.md
        fieldset.md
        radio-group.md
        switch.md
        slider.md
        angle-slider.md
        number-input.md
        password-input.md
        pin-input.md
        rating-group.md
        segment-group.md
        tags-input.md
        editable.md
        file-upload.md
        signature-pad.md
        image-cropper.md
        color-picker.md
      collections/
        README.md
        select.md
        combobox.md
        listbox.md
        tree-view.md
        menu.md
        carousel.md
        pagination.md
        steps.md
      overlays/
        README.md
        dialog.md
        drawer.md
        popover.md
        hover-card.md
        tooltip.md
        toast.md
        tour.md
        floating-panel.md
      disclosure/
        README.md
        accordion.md
        collapsible.md
        tabs.md
        toggle.md
        toggle-group.md
        splitter.md
        scroll-area.md
      date-time/
        README.md
        date-picker.md
        date-input.md
        timer.md
      display/
        README.md
        avatar.md
        progress-linear.md
        progress-circular.md
        qr-code.md
        clipboard.md
        marquee.md
    utilities/
      README.md
      client-only.md
      download-trigger.md
      environment.md
      focus-trap.md
      format-byte.md
      format-number.md
      format-time.md
      format-relative-time.md
      frame.md
      highlight.md
      json-tree-view.md
      locale.md
      presence.md
      swap.md
  samples/
    README.md
    provider-setup.md
    styling-with-panda-css.md
    styling-with-tailwind-css.md
    composition-with-aschild.md
    external-state-with-root-provider.md
    select-with-list-collection.md
    combobox-with-filtering.md
    react-hook-form-integration.md
    onboarding-tour.md
  scripts/
    README.md
    install.md
    mcp-server.md
    llms-txt-fetch.md

Exploration Procedure

Derive the category from the task, and identify the target page in the category's README.md:

1. Find the category corresponding to the task in the mapping table below (references/collections/"Data Collection" and references/components/collections/"Collection-based components" are a separate category, so do not confuse them)
2. of that category README.md to identify the target page
3. Read the target page's .md to check the details

Task → Category Mapping

Task	Category	Reference README
Want to know what Ark UI is, its philosophy and architecture / installation steps / differences between frameworks / MCP Server and llms.txt	overview	references/overview/README.md
Styling conventions (data-scope/data-part/data-state) / composition via asChild / component state management / animation / form integration / getting refs	guides	references/guides/README.md
createListCollection / createTreeCollection Want to build data with / want to use async list and selection state hooks	collections (data)	references/collections/README.md
Want to know the APIs of form components such as Checkbox, Slider, Number Input, Tags Input, File Upload, and Color Picker	components/form	references/components/form/README.md
Want to know the APIs of collection components such as Select, Combobox, Tree View, Menu, Carousel, Pagination, and Steps	components/collections	references/components/collections/README.md
Want to know the APIs of overlay components such as Dialog, Drawer, Popover, Tooltip, Toast, Tour, and Floating Panel	components/overlays	references/components/overlays/README.md
Want to know the APIs of disclosure components such as Accordion, Tabs, Toggle, Splitter, and Scroll Area	components/disclosure	references/components/disclosure/README.md
Want to know the APIs of date/time components such as Date Picker, Date Input, and Timer	components/date-time	references/components/date-time/README.md
Want to know the APIs of display components such as Avatar, Progress, QR Code, Clipboard, and Marquee	components/display	references/components/display/README.md
Want to use EnvironmentProvider, LocaleProvider, formatting utilities (format-number, etc.), Focus Trap, Presence, Highlight, and JSON Tree View	utilities	references/utilities/README.md
Want to know typical usage and examples (Provider Setup, Panda/Tailwind styling, external state control via RootProvider, React Hook Form integration, etc.)	samples	samples/README.md
Want to know installation, MCP Server setup, and llms.txt retrieval commands	scripts	scripts/README.md