@ark-ui/react

@ark-ui/react 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/reactoffers the following components:

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

Installation

To install @ark-ui/react, run the following command:

npm install @ark-ui/react

or with yarn:

yarn add @ark-ui/react

Usage

To use a component from @ark-ui/react, import it and include it in your application:

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>
  )
}

Documentation

For more detailed documentation and examples, please visit the official documentation.

Contribution

We welcome contributions to @ark-ui/react. Please read our contributing guidelines for more information on how to contribute.

Licence

This project is licensed under the terms of the MIT license.