Ark UI Has Free Headless Components — Here's How to Use It

#react #vue #components #webdev

Radix is great but React-only. Headless UI is Tailwind-coupled. Ark UI provides unstyled, accessible components for React, Vue, AND Solid — from the Chakra UI team.

What Is Ark UI?

Ark UI is a headless component library powered by state machines. It gives you fully accessible, unstyled components that work with React, Vue 3, and Solid.js.

Quick Start

npm install @ark-ui/react   # or @ark-ui/vue, @ark-ui/solid

import { Dialog } from '@ark-ui/react';

function MyDialog() {
  return (
    <Dialog.Root>
      <Dialog.Trigger>Open Dialog</Dialog.Trigger>
      <Dialog.Backdrop />
      <Dialog.Positioner>
        <Dialog.Content>
          <Dialog.Title>Confirm Action</Dialog.Title>
          <Dialog.Description>
            Are you sure you want to proceed?
          </Dialog.Description>
          <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
        </Dialog.Content>
      </Dialog.Positioner>
    </Dialog.Root>
  );
}

Style it however you want — Tailwind, CSS modules, Panda CSS, or plain CSS.

Available Components (40+)

Accordion, Avatar, Carousel, Checkbox, Clipboard, Collapsible, Color Picker, Combobox, Date Picker, Dialog, Drawer, Editable, Field, 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

Why Ark UI

Feature	Ark UI	Radix	Headless UI
React	Yes	Yes	Yes
Vue	Yes	No	Yes
Solid	Yes	No	No
Components	40+	28	10
State machines	Yes (Zag.js)	Custom	Custom
Date Picker	Yes	No	No
Color Picker	Yes	No	No
Carousel	Yes	No	No

Powered by Zag.js

Ark UI uses Zag.js — state machines for UI components. This means:

Consistent behavior across frameworks
Predictable state transitions
Battle-tested accessibility

Styling Example (Tailwind)

<Dialog.Root>
  <Dialog.Trigger className="px-4 py-2 bg-blue-500 text-white rounded-lg">
    Open
  </Dialog.Trigger>
  <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-xl p-6 max-w-md shadow-xl">
      <Dialog.Title className="text-xl font-bold">
        Confirm
      </Dialog.Title>
      <Dialog.Description className="mt-2 text-gray-600">
        Are you sure?
      </Dialog.Description>
    </Dialog.Content>
  </Dialog.Positioner>
</Dialog.Root>

Get Started

Building accessible UIs? My Apify scrapers provide clean data for your components. Custom solutions: spinov001@gmail.com

DEV Community