# Getting Started

URL: https://ark-ui.com/docs/overview/getting-started
LLM: https://ark-ui.com/llms.txt/overview/getting-started

A Step-by-step Guide to Using Ark UI

---

## Quickstart

Running tight on schedule? No worries! Check out our quickstart examples to get started with Ark UI in seconds.

- [Next.js Template](https://stackblitz.com/edit/github-qcm2dskf)
- [Solid Start Template](https://stackblitz.com/edit/github-1hgkbbln)
- [Nuxt Template](https://stackblitz.com/edit/github-s3sg6syq)

## Setup Guide

<Steps>
<Step title="Prerequisite" number="1">

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.

</Step>
<Step title="Install Ark UI" number="2">

Install the Ark UI dependency using your preferred package manager.

```bash
npm install @ark-ui/react
// or
pnpm install @ark-ui/react
// or
yarn add @ark-ui/react
// or
bun add @ark-ui/react
```

</Step>
<Step number="3" title="Add a component">

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

```tsx
import { Slider } from '@ark-ui/react/slider'
import styles from 'styles/slider.module.css'

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

</Step>

<Step number="4" title="Style a component">
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:

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

Check out the [Styling Components guide](/react/docs/guides/styling) to learn more about styling components in Ark UI.

</Step>

<Step number="5" title="That's it">

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](https://github.com/chakra-ui/ark/issues/new/choose) or reach out on
[Discord](https://discord.gg/ww6HE5xaZ2).

Happy hacking! ✌️

</Step>
</Steps>