Package Exports

@ark-ui/react
@ark-ui/react/package.json
@ark-ui/react/switch

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@ark-ui/react) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@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:

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.