Ark UI Has Free Headless Components for React, Vue, and Solid — Here's Why It Matters

If you love Radix UI but need Vue or Solid support, Ark UI is your answer.

What is Ark UI?

Ark UI is a headless component library built on Zag.js state machines. It provides unstyled, accessible components for React, Vue, and Solid — same API across all three frameworks.

Quick Start

# React
bun add @ark-ui/react

# Vue
bun add @ark-ui/vue

# Solid
bun add @ark-ui/solid

Dialog Example (React)

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>
  );
}

Same Component in Vue

<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>

Color Picker (Unique to Ark UI)

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 Radix UI vs Headless UI

Feature	Ark UI	Radix UI	Headless UI
React	Yes	Yes	Yes
Vue	Yes	No	Yes
Solid	Yes	No	No
State Machine	Zag.js	Custom	Custom
Color Picker	Yes	No	No
Date Picker	Yes	No	No
File Upload	Yes	No	No
Pin Input	Yes	No	No

Available Components

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.

More components than Radix, and framework-agnostic.

---

Need structured data for your UI components? Check out my web scraping actors on Apify Store — extract data from any website. For custom solutions, email [e-mail].