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
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.
Install Ark UI
Install the Ark UI dependency using your preferred package manager.
npm install @ark-ui/reactpnpm install @ark-ui/reactyarn add @ark-ui/reactbun add @ark-ui/reactAdd 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 :index="0" />
</Slider.Control>
</Slider.Root>
</template>
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.