# Getting Started

URL: https://ark-ui.com/docs/overview/getting-started
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/overview/getting-started.mdx

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.

<Quickstart />

## 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.

<InstallCmd />

</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.

<Example component="slider" id="basic" />

</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>