@ark-ui/vue
@ark-ui/vue
is an open-source UI component library designed to make building high-quality, accessible web applications easier. The library focuses on providing low-level UI components with an emphasis on accessibility, customization, and developer experience.
Key Features
- Accessible: Components in Ark UI are designed with accessibility in mind, adhering to WAI-ARIA design patterns and handling implementation details such as aria and role attributes, focus management, and keyboard navigation.
- Headless: Components are shipped without styles, giving developers full control over styling.
- Customizable: The open component architecture allows for customization and customization, providing granular access to each component part.
- Powered by state machines: Predictable, simplified, and robust component behavior.
- Developer Experience: The library provides a fully-typed API with a consistent and predictable experience.
Available Components
At the moment, @ark-ui/vue
offers the following components:
Installation
To install @ark-ui/vue
, run the following command:
npm install @ark-ui/vue
or with yarn:
yarn add @ark-ui/vue
Usage
To use a component from @ark-ui/vue
, import it and include it in your application:
<script setup lang="ts">
import { ref } from 'vue'
import {
Slider,
SliderControl,
SliderLabel,
SliderOutput,
SliderRange,
SliderThumb,
SliderTrack,
type SliderProps,
} from '@ark-ui/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>
Documentation
For more detailed documentation and examples, please visit the official documentation.
Contribution
We welcome contributions to @ark-ui/vue
. Please read our contributing guidelines for more information on how to contribute.
Licence
This project is licensed under the terms of the MIT license.