@ark-ui/solid

@ark-ui/solid

@ark-ui/solid 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/solidoffers 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
• Switch
• Tabs
• Tags Input
• Toast
• Tooltip

Installation

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

npm install @ark-ui/solid

or with yarn:

yarn add @ark-ui/solid

Usage

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

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

Documentation

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

Contribution

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

Licence

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