# Styling

URL: https://ark-ui.com/docs/guides/styling
Source: https://raw.githubusercontent.com/chakra-ui/ark/refs/heads/main/website/src/content/pages/guides/styling.mdx

Learn how to style Ark Ripplw components.

---

## Overview

Ark Ripple is a headless component library that works with any styling solution. It provides functional styles for elements
like popovers for positioning, while leaving presentation styles up to you. Some components also expose CSS variables
that can be used for styling or animations.

### Data Attributes

Ark Ripple components use `data-scope` and `data-part` attributes to target specific elements within a component.
Interactive components often include `data-*` attributes to indicate their state. For example, here's what an open
accordion item looks like:

```html
<div data-scope="accordion" data-part="item" data-state="open"></div>
```

For more details on each component's data attributes, refer to their respective documentation.

## Styling with CSS

When styling components with CSS, you can target the data attributes assigned to each component part for easy
customization.

### Styling a Part

To style a specific component part, target its `data-scope` and `data-part` attributes:

```css
[data-scope='accordion'][data-part='item'] {
  border-bottom: 1px solid #e5e5e5;
}
```

### Styling a State

To style a component based on its state, use the `data-state` attribute:

```css
[data-scope='accordion'][data-part='item'][data-state='open'] {
  background-color: #f5f5f5;
}
```

> **Tip:** If you prefer using classes instead of data attributes, utilize the `class` or `className` prop to add custom
> classes to Ark Ripple components.

### Class Names

If you prefer using classes instead of data attributes, utilize `class` or `className` prop to add custom classes to Ark
Ripple components.

Pass a class:

```jsx
<Accordion.Root>
  <Accordion.Item className="AccordionItem">{/* … */}</Accordion.Item>
</Accordion.Root>
```

Then use in styles:

```css
.AccordionItem {
  border-bottom: 1px solid #e5e5e5;

  &[data-state='open'] {
    background-color: #f5f5f5;
  }
}
```

## Styling with Tailwind CSS

[Tailwind CSS](https://tailwindcss.com/) is a utility-first CSS framework providing a flexible way to style your
components.

### Styling a Part

To style a part, apply classes directly to the parts using either `class` or `className`, depending on the JavaScript
framework.

```jsx
<Accordion.Root>
  <Accordion.Item className="border-b border-gray-300">{/* … */}</Accordion.Item>
</Accordion.Root>
```

### Styling a State

Leverage Tailwind CSS's variant selector to style a component based on its data-state attribute.

```jsx
<Accordion.Root>
  <Accordion.Item className="border-b border-gray-300 data-[state=open]:bg-gray-100">{/* … */}</Accordion.Item>
</Accordion.Root>
```