Discover Ark UI: Headless Components for React, Vue, Solid

What is Ark UI?

Ark UI emerges as a prominent headless component library, utilizing Zag.js state machines to deliver accessible and unstyled components across React, Vue, and Solid frameworks. This cross-framework compatibility offers developers a consistent API experience.

Getting Started

To integrate Ark UI into your project, use the following commands for each framework:

React

bun add @ark-ui/react

Vue

bun add @ark-ui/vue

Solid

bun add @ark-ui/solid

Example: Dialog Component

React Implementation

import { Dialog, Portal } from "@ark-ui/react";

export function MyDialog() {
  return (
    <Dialog.Root>
      <Dialog.Trigger>Open Dialog</Dialog.Trigger>
      <Portal>
        <Dialog.Backdrop className="fixed inset-0 bg-black/50" />
        <Dialog.Positioner className="fixed inset-0 flex items-center justify-center">
          <Dialog.Content className="bg-white rounded-lg p-6 max-w-md">
            <Dialog.Title className="text-xl font-bold">Edit Profile</Dialog.Title>
            <Dialog.Description className="mt-2 text-gray-600">
              Update your profile information below.
            </Dialog.Description>
            <input className="mt-4 w-full border rounded p-2" placeholder="Name" />
            <Dialog.CloseTrigger className="mt-4 btn">Save</Dialog.CloseTrigger>
          </Dialog.Content>
        </Dialog.Positioner>
      </Portal>
    </Dialog.Root>
  );
}

Vue Implementation

<script setup>
import { Dialog } from "@ark-ui/vue";
</script>

<template>
  <Dialog.Root>
    <Dialog.Trigger>Open Dialog</Dialog.Trigger>
    <Teleport to="body">
      <Dialog.Backdrop class="fixed inset-0 bg-black/50" />
      <Dialog.Positioner class="fixed inset-0 flex items-center justify-center">
        <Dialog.Content class="bg-white rounded-lg p-6 max-w-md">
          <Dialog.Title class="text-xl font-bold">Edit Profile</Dialog.Title>
          <Dialog.Description class="mt-2 text-gray-600">
            Update your profile information below.
          </Dialog.Description>
          <Dialog.CloseTrigger class="mt-4 btn">Save</Dialog.CloseTrigger>
        </Dialog.Content>
      </Dialog.Positioner>
    </Teleport>
  </Dialog.Root>
</template>

Unique Features of Ark UI

Ark UI offers several unique components not found in Radix UI or Headless UI, such as:

• Color Picker
• Date Picker
• File Upload
• Pin Input

Color Picker Example

import { ColorPicker } from "@ark-ui/react";

export function MyColorPicker() {
  return (
    <ColorPicker.Root defaultValue="#3498db">
      <ColorPicker.Label>Pick a color</ColorPicker.Label>
      <ColorPicker.Control>
        <ColorPicker.ChannelInput channel="hex" />
        <ColorPicker.Trigger>
          <ColorPicker.ValueSwatch />
        </ColorPicker.Trigger>
      </ColorPicker.Control>
      <ColorPicker.Positioner>
        <ColorPicker.Content>
          <ColorPicker.Area>
            <ColorPicker.AreaBackground />
            <ColorPicker.AreaThumb />
          </ColorPicker.Area>
          <ColorPicker.ChannelSlider channel="hue">
            <ColorPicker.ChannelSliderTrack />
            <ColorPicker.ChannelSliderThumb />
          </ColorPicker.ChannelSlider>
        </ColorPicker.Content>
      </ColorPicker.Positioner>
    </ColorPicker.Root>
  );
}

Ark UI vs. Competitors

Comparative Overview

Extensive Component Library

Ark UI offers a comprehensive list of components, including:

• Accordion
• Avatar
• Carousel
• Checkbox
• Clipboard
• Collapsible
• Color Picker
• Combobox
• Date Picker
• Dialog
• Editable
• File Upload
• Hover Card
• Menu
• Number Input
• Pagination
• Pin Input
• Popover
• Progress
• Radio Group
• Rating Group
• Segment Group
• Select
• Slider
• Splitter
• Switch
• Tabs
• Tags Input
• Toast
• Toggle Group
• Tooltip
• Tree View

These components make Ark UI a robust choice for developers seeking a framework-agnostic, feature-rich library.