Ark UI is a headless library for building reusable, scalable Design Systems that works for a wide range of JS frameworks.
npm i @ark-ui/react
React
Vue
Solid
Preset Colors
Dessert jelly beans pudding chocolate pie pastry danish chocolate pie.
With Ark, you have the freedom to choose the framework that suits your team's needs and preferences.
Start using headless Ark UI Components with React.js
Start using headless Ark UI Components with Vue.js
Start using headless Ark UI Components with Solid.js
The components are built using a declarative syntax, which makes them easier to reason about and understand.
Style the components according to your design system, rather than being limited by predefined styles.
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,
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>
)
}
<script setup lang="ts">
import {
Slider,
SliderControl,
SliderLabel,
SliderOutput,
SliderProps,
SliderRange,
SliderThumb,
SliderTrack,
} from '@ark-ui/vue'
import { ref } from 'vue'
const sliderValue = ref<SliderProps['modelValue']>(30)
</script>
<template>
<Slider :min="-50" :max="50" v-model="sliderValue">
<SliderLabel>Label</SliderLabel>
<SliderOutput>{{ sliderValue }}</SliderOutput>
<SliderControl>
<SliderTrack>
<SliderRange />
</SliderTrack>
<SliderThumb />
</SliderControl>
</Slider>
</template>
import {
Slider,
SliderControl,
SliderLabel,
SliderOutput,
SliderRange,
SliderThumb,
SliderTrack,
} from '@ark-ui/solid'
import { createSignal } from 'solid-js'
export const MySlider = () => {
const [value, setValue] = createSignal(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>
)
}
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.
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
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
Frontend Developer, Mandix
Ark UI is an open-source library that allows developers to build components faster without sweating on functionality.
Get StartedThe Chakra UI team developed Ark UI to give you total control of your web applications
Ark UI is an open-source library that allows developers to build components faster
To get involved in the community, ask questions.
Follow now for announcements and new features.
To file issues, feature requests, and contribute.