Harness Ark UI's Versatile Headless Components

Introducing Ark UI

Ark UI is an innovative, headless component library designed to enhance UI development across popular frameworks like React, Vue 3, and Solid.js. It offers unstyled components that prioritize accessibility and flexibility, enabling developers to craft custom designs using their preferred styling approach.

Quick Installation Guide

To get started with Ark UI, simply install the package compatible with your framework:

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

Here's a basic implementation of a dialog component in React:

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

You have the freedom to style it with Tailwind, CSS modules, Panda CSS, or plain CSS, tailoring it to fit your design requirements.

Comprehensive Component Library

Ark UI boasts an extensive collection of over 40 components, including:

• 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 Choose Ark UI?

Feature Comparison

Ark UI not only provides a wider range of components but also supports multiple frameworks, making it a versatile choice for developers.

Powered by Zag.js

Ark UI leverages Zag.js, which employs state machines to ensure:

• Consistent behavior across different frameworks
• Predictable state transitions
• Robust accessibility features

Tailwind Styling Example

Here is an example of how you can style a dialog component using Tailwind CSS:

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

Begin Your Ark UI Journey

For detailed documentation and examples, visit the Ark UI GitHub repository, which has garnered over 4,000 stars, or explore the components through their Storybook.

Ark UI offers a powerful solution for developers aiming to create accessible and customizable user interfaces across multiple platforms.