Getting Started

A Step-by-step Guide to Using Ark UI


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

Setup Guide



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.


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.


Add a component

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


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.