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/reactnpm install @ark-ui/solidnpm install @ark-ui/vue3
Add a component
In this guide, we will be adding a Slider component. Copy the following code to your project.
import { Slider } from '@ark-ui/react'
export const Basic = () => {
return (
<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>
)
}
import { Slider } from '@ark-ui/solid'
export const Basic = () => {
return (
<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>
)
}
<script setup lang="ts">
import { Slider } from '@ark-ui/vue'
</script>
<template>
<Slider.Root>
<Slider.Label>Label</Slider.Label>
<Slider.ValueText />
<Slider.Control>
<Slider.Track>
<Slider.Range />
</Slider.Track>
<Slider.Thumb :key="0" :index="0" />
</Slider.Control>
</Slider.Root>
</template>
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.
Previous
IntroductionNext
The asChild Prop