Getting Started

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.

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

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

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.