Ark UI Has a Free API — Headless UI Components for React, Solid, and Vue

What if you had unstyled, accessible UI components that worked with React, Solid, AND Vue — with the same API?

Ark UI is a headless component library built on state machines. It provides behavior and accessibility — you provide the styling.

Why Ark UI

• Framework-agnostic — React, Solid, Vue from one codebase
• State machine powered — predictable behavior via @zag-js
• Fully accessible — WAI-ARIA compliant out of the box
• Unstyled — bring your own CSS, Tailwind, Panda CSS
• 40+ components — Dialog, Combobox, DatePicker, ColorPicker, Toast...

Quick Start

npm install @ark-ui/react

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

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

Advanced: Date Picker

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

function MyDatePicker() {
  return (
    <DatePicker.Root>
      <DatePicker.Label>Select Date</DatePicker.Label>
      <DatePicker.Control>
        <DatePicker.Input />
        <DatePicker.Trigger>Pick</DatePicker.Trigger>
      </DatePicker.Control>
      <DatePicker.Positioner>
        <DatePicker.Content>
          <DatePicker.View view="day">
            {(api) => (
              <>
                <DatePicker.ViewControl>
                  <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                  <DatePicker.ViewTrigger>
                    <DatePicker.RangeText />
                  </DatePicker.ViewTrigger>
                  <DatePicker.NextTrigger>Next</DatePicker.NextTrigger>
                </DatePicker.ViewControl>
                <DatePicker.Table>
                  <DatePicker.TableBody>
                    {api.weeks.map((week) => (
                      <DatePicker.TableRow key={week.toString()}>
                        {week.map((day) => (
                          <DatePicker.TableCell key={day.toString()} value={day}>
                            <DatePicker.TableCellTrigger>
                              {day.day}
                            </DatePicker.TableCellTrigger>
                          </DatePicker.TableCell>
                        ))}
                      </DatePicker.TableRow>
                    ))}
                  </DatePicker.TableBody>
                </DatePicker.Table>
              </>
            )}
          </DatePicker.View>
        </DatePicker.Content>
      </DatePicker.Positioner>
    </DatePicker.Root>
  );
}

Real Use Case

A design system team maintained separate component libraries for React and Vue — two codebases, two sets of bugs. After adopting Ark UI, they unified on one component API. Bug fixes applied to both frameworks automatically.

When to Use Ark UI

• Design systems supporting multiple frameworks
• Custom-styled UI that needs accessibility
• Projects using Panda CSS (same ecosystem)
• Teams tired of fighting Radix/Headless UI styling

Get Started

Visit ark-ui.com — open source, MIT licensed.

---

Need custom data pipelines or scraping solutions? Check out my Apify actors or email me at [e-mail] for custom solutions.