@ark-ui/vue

@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/vueoffers the following components:

• Accordion
• Carousel
• Checkbox
• Color Picker
• Combobox
• Dialog
• Editable
• Hover Card
• Menu
• Number Input
• Pagination
• Pin Input
• Popover
• Pressable
• Radio Group
• Range Slider
• Rating Group
• Select
• Slider
• Splitter
• Tabs
• Tags Input
• Toast
• Tooltip

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.