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.




Composable API design for a delightful experience


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


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


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


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 (
      onValueChange={(e) => setValue(e.value)}
          <Slider.Range />
        <Slider.Thumb key={0} index={0} />

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.