Fully customizable and accessible UI components

Ark UI is a headless UI library with over 45+ components designed to build reusable, scalable Design Systems that works for a wide range of JS frameworks.

Get Started Show Components

React

Solid

Vue

Svelte

Zero-Styling Freedom

Your design system, your rules. Every component starts as a blank canvas ready for your creativity.

Truly Composable

Build complex UIs effortlessly with modular components that work seamlessly together.

Accessibility-First

Ship with confidence. Every component is WCAG compliant and thoroughly tested for accessibility.

State Machine Powered

Predictable behavior, fewer bugs. State machines ensure rock-solid component interactions.

import { Slider } from '@ark-ui/react/slider'
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 index={0} />
      </Slider.Control>
    </Slider.Root>
  )
}

import { Slider } from '@ark-ui/solid/slider'
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 lang="ts">
  import { Slider } from '@ark-ui/svelte/slider'

  let value = $state([30])
</script>

<Slider.Root bind:value>
  <Slider.Label>Label</Slider.Label>
  <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/slider'
import { ref } from 'vue'

const value = ref([30])
</script>

<template>
  <Slider.Root :min="-50" :max="50" v-model="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>
</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

Built with Ark UI

See What's Possible

Explore real-world applications built by developers who trust Ark UI. From startups to enterprises, see how our headless components power modern web experiences.