Fully customizable and accessible UI components

Ark UI is a headless library for building reusable, scalable Design Systems that works for a wide range of JS frameworks.

React

Solid

Vue

Composable API design for a delightful experience

Unstyled

Style the components according to your design system, rather than being limited by predefined styles.

Composable

The components are built using a declarative syntax, which makes them easier to reason about and understand.

Accessible

Ark follows accessibility standards and guidelines, ensuring that the components can be accessed and used by all users.

Reliable

Using state machines, Ark can help you create more reliable user interfaces, with less room for bugs and unexpected behavior.

import { Slider } from '@ark-ui/react'
import { useState } from 'react'
  
export const MySlider = () => {
  const [value, setValue] = useState([30])
    
  return (
    <Slider.Root
      min={-50}
      max={50}
      value={value}
      onValueChange={(e) => setValue(e.value)}
    >
      <Slider.Label>Label</Slider.Label>
      <Slider.ValueText>{value}</Slider.ValueText>
      <Slider.Control>
        <Slider.Track>
          <Slider.Range />
        </Slider.Track>
        <Slider.Thumb key={0} index={0} />
      </Slider.Control>
    </Slider.Root>
  )
}

Designed for product teams and organizations

With support for a wide range of JS frameworks, you can create a design system that can be seamlessly integrated across multiple platforms and applications.

Get started

Driven by State Machines
to make your life easier.

Utilizing state machines, Ark UI substantially cuts down on errors while ensuring predictable behavior in every component. Develop with confidence.

Join the Ark UI Community

For insights, support, and updates, connect on Discord. For real-time news, follow us on Twitter.

CS
TK
TP
SA
A
JB
ZS
EA