Getting Started

Before you start, ensure you have a proper project setup. If not, follow your preferred application framework setup guide and then return to this guide.

Install the Ark UI dependency using your preferred package manager.

npm install ark-ripple

In this guide, we will be adding a Slider component. Copy the following code to your project.

import { Slider } from 'ark-ripple/slider';
import styles from './index.module.css';

export component Basic() {
  <Slider.Root class={styles.Root} defaultValue={[40]}>
    <div style={{ display: 'flex', justifyContent: 'space-between' }}>
      <Slider.Label class={styles.Label}>{'Label'}</Slider.Label>
      <Slider.ValueText class={styles.ValueText} />
    </div>
    <Slider.Control class={styles.Control}>
      <Slider.Track class={styles.Track}>
        <Slider.Range class={styles.Range} />
      </Slider.Track>
      <Slider.Thumb index={0} class={styles.Thumb}>
        <Slider.HiddenInput />
      </Slider.Thumb>
    </Slider.Control>
  </Slider.Root>
}

Ark UI is a headless component library that doesn't include default styles. You can leverage the data-scope and data-part attributes to style your components with custom CSS.

For example, to style a slider component, you can target its parts using these attributes:

/* Targets the <Slider.Root /> */
[data-scope='slider'][data-part='root'] {
  display: flex;
  flex-direction: column;
}

Check out the Styling Components guide to learn more about styling components in Ark Ripple.

Congratulations! You've successfully set up and styled your components using Ark UI. If you run into any issues or have questions, open an issue on our GitHub or reach out on Discord.

Happy hacking! ✌️