Ark UI Has a Free API You're Not Using

Ark UI is a headless component library built on state machines. It works with React, Vue, and Solid — and provides WAI-ARIA compliant components with zero styling opinions.

The Free APIs You're Missing

1. State Machine Architecture — Predictable Components

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

export function MyDialog() {
  return (
    <Dialog.Root>
      <Dialog.Trigger>Open</Dialog.Trigger>
      <Dialog.Backdrop />
      <Dialog.Positioner>
        <Dialog.Content>
          <Dialog.Title>Settings</Dialog.Title>
          <Dialog.Description>Update your preferences</Dialog.Description>
          <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
        </Dialog.Content>
      </Dialog.Positioner>
    </Dialog.Root>
  );
}

Every component is a state machine. No unexpected states, no race conditions.

2. Controlled & Uncontrolled — Your Choice

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

// Uncontrolled
<Slider.Root defaultValue={[50]}>
  <Slider.Track><Slider.Range /></Slider.Track>
  <Slider.Thumb index={0} />
</Slider.Root>

// Controlled
const [value, setValue] = useState([50]);
<Slider.Root value={value} onValueChange={(e) => setValue(e.value)}>
  <Slider.Track><Slider.Range /></Slider.Track>
  <Slider.Thumb index={0} />
</Slider.Root>

3. Date Picker — Full Calendar with Localization

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

<DatePicker.Root
  locale="en-US"
  selectionMode="range"
  onValueChange={(e) => console.log(e.value)}
>
  <DatePicker.Control>
    <DatePicker.Input />
    <DatePicker.Trigger>Pick date</DatePicker.Trigger>
  </DatePicker.Control>
  <DatePicker.Positioner>
    <DatePicker.Content>
      <DatePicker.View view="day">
        <DatePicker.ViewControl>
          <DatePicker.PrevTrigger />
          <DatePicker.ViewTrigger />
          <DatePicker.NextTrigger />
        </DatePicker.ViewControl>
        <DatePicker.Table>
          <DatePicker.TableBody>
            {(weeks) => weeks.map((week) => (
              <DatePicker.TableRow key={week}>
                {week.map((day) => <DatePicker.DayTableCell key={day} value={day} />)}
              </DatePicker.TableRow>
            ))}
          </DatePicker.TableBody>
        </DatePicker.Table>
      </DatePicker.View>
    </DatePicker.Content>
  </DatePicker.Positioner>
</DatePicker.Root>

4. Color Picker — Full HSL/RGB/HEX

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

<ColorPicker.Root defaultValue="#3b82f6">
  <ColorPicker.Control>
    <ColorPicker.Trigger />
    <ColorPicker.Input />
  </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>

5. File Upload — Drag and Drop Built-In

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

<FileUpload.Root maxFiles={5} accept="image/*">
  <FileUpload.Dropzone>
    <p>Drag files here or click to browse</p>
  </FileUpload.Dropzone>
  <FileUpload.ItemGroup>
    {(files) => files.map((file) => (
      <FileUpload.Item key={file.name} file={file}>
        <FileUpload.ItemName />
        <FileUpload.ItemSizeText />
        <FileUpload.ItemDeleteTrigger>Remove</FileUpload.ItemDeleteTrigger>
      </FileUpload.Item>
    ))}
  </FileUpload.ItemGroup>
</FileUpload.Root>

Getting Started

npm install @ark-ui/react

---

Need data from any website delivered as clean JSON? I build production web scrapers that handle anti-bot, proxies, and rate limits. 77 scrapers running in production. Email me: [e-mail]

Check out my awesome-web-scraping list for the best scraping tools and resources.