Get fully customizable, accessible and unstyled UI components

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

Get Started

npm i @ark-ui/react

React

Vue

Solid


Preset Colors

Pudding donut gummies chupa chups oat cake marzipan biscuit tart. Dessert macaroon ice cream bonbon jelly. Jelly topping tiramisu halvah lollipop.

A versatile component library for every framework

With Ark, you have the freedom to choose the framework that suits your team's needs and preferences.

@ark-ui/react

Start using headless Ark UI Components with React.js

Get started

@ark-ui/vue

Start using headless Ark UI Components with Vue.js

Get started

@ark-ui/solid

Start using headless Ark UI Components with Solid.js

Get started

Composable API design for a delightful experience

Composable

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

Themeable

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

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,
  SliderControl,
  SliderLabel,
  SliderOutput,
  SliderRange,
  SliderThumb,
  SliderTrack,
} from '@ark-ui/react'
import { useState } from 'react'
  
export const MySlider = () => {
  const [value, setValue] = useState(30)
    
  return (
    <Slider
      min={-50}
      max={50}
      value={value}
      onChange={(e) => setValue(e.value)}
    >
      <SliderLabel>Label</SliderLabel>
      <SliderOutput>{value}</SliderOutput>
      <SliderControl>
        <SliderTrack>
          <SliderRange />
        </SliderTrack>
        <SliderThumb />
      </SliderControl>
    </Slider>
  )
}

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

I've been using Ark for my personal project, and it's been a game-changer. The accessibility standards have given me peace of mind that my UI is usable by everyone. I'd definitely recommend Ark to any developer who wants to build reliable and accessible UIs.

Isabella Williams

Isabella Williams

Accessibility Engineer, Clearbit

As someone who's new to UI development, I've found Ark to be incredibly helpful. The declarative syntax has made it easy for me to reason about how my components will behave, and the themeability has allowed me to create UIs that match my client's brand perfectly.

Tyler Kim

Tyler Kim

Frontend Developer, Mandix

Accessible components.
Powered by State Machines

Ark UI is an open-source library that allows developers to build components faster without sweating on functionality.

Get Started

Made by creators of
Chakra UI and Zag.js

The Chakra UI team developed Ark UI to give you total control of your web applications

People

Segun Adebayo
Esther Adebyo
Jonathan Bakebwa
Christian Schröter
Tim Kolberger
Tyler Pfledderer

Join our awesome community

Ark UI is an open-source library that allows developers to build components faster

Discord

To get involved in the community, ask questions.

Join us

Twitter

Follow now for announcements and new features.

Follow us

GitHub

To file issues, feature requests, and contribute.

Contribute