Overview
Getting started

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.

Setup Guide

1

Prerequisite

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.

2

Install Ark UI

Install the Ark UI dependency using your preferred package manager.

npm install @ark-ui/vue
3

Add a component

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

<script setup lang="ts">
import { Slider } from '@ark-ui/vue/slider'
</script>

<template>
  <Slider.Root>
    <Slider.Label>Label</Slider.Label>
    <Slider.ValueText />
    <Slider.Control>
      <Slider.Track>
        <Slider.Range />
      </Slider.Track>
      <Slider.Thumb :index="0" />
    </Slider.Control>
  </Slider.Root>
</template>
4

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:

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

5

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 or reach out on Discord.

Happy hacking! ✌️