Home | Ark UI

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.

Get Started Show Components

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

import { Slider } from '@ark-ui/solid'
import { createSignal } from 'solid-js'

export const MySlider = () => {
  const [value, setValue] = createSignal([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 index={0} />
      </Slider.Control>
    </Slider.Root>
  )
}

<script setup lang="ts">
import { Slider } from '@ark-ui/vue'
import { ref } from 'vue'

const sliderValue = ref<SliderProps['modelValue']>([30])
</script>

<template>
  <Slider.Root :min="-50" :max="50" v-model="sliderValue">
    <Slider.Label>Label</Slider.Label>
    <Slider.ValueText>{{ sliderValue }}</Slider.ValueText>
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb :key="0" :index="0" />
    </Slider.Control>
  </Slider.Root>
</template>

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