Ark UI is a headless library for building reusable, scalable Design Systems that works for a wide range of JS frameworks.
React
Solid
Vue
Your design system, your rules. Every component starts as a blank canvas ready for your creativity.
Build complex UIs effortlessly with modular components that work seamlessly together.
Ship with confidence. Every component is WCAG compliant and thoroughly tested for accessibility.
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 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>
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.
Built with Ark UI
Explore real-world applications built by developers who trust Ark UI. From startups to enterprises, see how our headless components power modern web experiences.
Utilizing state machines, Ark UI substantially cuts down on errors while ensuring predictable behavior in every component. Develop with confidence.
For insights, support, and updates, connect on Discord. For real-time news, follow us on Twitter.