Ark UI Has a Free API That Most Developers Don't Know About

Ark UI is a headless component library from the creators of Chakra UI. It provides unstyled, accessible components for React, Vue, and Solid — perfect for building design systems.

Headless Dialog

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

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

Combobox (Autocomplete)

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

const items = ["React", "Vue", "Svelte", "Angular", "Solid"];

function FrameworkPicker() {
  return (
    <Combobox.Root items={items} onValueChange={(e) => console.log(e.value)}>
      <Combobox.Label>Framework</Combobox.Label>
      <Combobox.Control>
        <Combobox.Input placeholder="Search..." />
        <Combobox.Trigger>Open</Combobox.Trigger>
      </Combobox.Control>
      <Combobox.Positioner>
        <Combobox.Content>
          {items.map(item => (
            <Combobox.Item key={item} item={item}>
              <Combobox.ItemText>{item}</Combobox.ItemText>
            </Combobox.Item>
          ))}
        </Combobox.Content>
      </Combobox.Positioner>
    </Combobox.Root>
  );
}

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>Calendar</DatePicker.Trigger>
      </DatePicker.Control>
      <DatePicker.Positioner>
        <DatePicker.Content>
          <DatePicker.View view="day">
            {(api) => (<>
              <DatePicker.ViewControl>
                <DatePicker.PrevTrigger>Prev</DatePicker.PrevTrigger>
                <DatePicker.ViewTrigger>{api.visibleRangeText.start}</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>
  );
}

Key Features

• Headless — bring your own styles
• Multi-framework — React, Vue, Solid
• WAI-ARIA compliant accessibility
• State machines powering each component
• From Chakra UI team — production-proven patterns

---

Need to scrape or monitor web data at scale? Check out my web scraping actors on Apify — ready-made tools that extract data from any website in minutes. Or email me at [e-mail] for custom solutions.