Ark UI is a headless library for building reusable, scalable Design Systems that works for a wide range of JS frameworks.
React
Solid
Vue
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 (
<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>
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.
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.