Ark Logo

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 that you have a proper project setup. If not, please follow your preffered application framework setup guide and once you've completed that, come back to this guide.

2

Install Ark UI

Let's start by installing the Ark UI package. Make sure to pick the either the React, Solid or Vue package based on your project setup.

npm install @ark-ui/react
3

Add a component

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

Story
4

Style a component

Ark UI is a headless component library that doesn't include default styles. Nowadays, projects often use CSS-in-JS libraries like Panda CSS or frameworks like Tailwind to style their components.

However, if you prefer to write your own CSS, you can leverage the data-scope and data-part attributes to style your components.

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

To learn more about how to style components in Ark UI, checkout our Styling Components guide.