# Styling

corvu leaves the styling up to you. You can use Tailwind CSS, any CSS-in-JS library or just plain old CSS to style primitives.

## Data attributes [Section titled Data attributes](https://corvu.dev/docs/styling/\#data-attributes)

Components that can be in different states, e.g. `open` or `closed` for a dialog, provide data attributes to style them accordingly.

Here is an example of how to style a dialog based on its open state:

```
.dialog_content[data-open] {
  /* styles to apply when open */
}
.dialog_content[data-closed] {
  /* styles to apply when closed */
}
```

Don’t forget to add the `dialog_content` class to your Dialog content component:

```
<Dialog.Content class="dialog_content">...</Dialog.Content>
```

Additionally, every corvu component has a data attribute for you to use. A dialog content element would render like this:

```
<div data-corvu-dialog-content data-open>...</div>
```

You can use it to style all components of the same kind at once:

```
[data-corvu-dialog-content] {
  /* styles to apply to the dialog content */
}
[data-corvu-dialog-content][data-open] {
  /* styles to apply when open */
}
[data-corvu-dialog-content][data-closed] {
  /* styles to apply when closed */
}
```

Additionally, corvu provides plugins for these CSS frameworks:

- [Tailwind CSS plugin](https://corvu.dev/docs/installation/#tailwind-css-plugin)
- [UnoCSS preset](https://corvu.dev/docs/installation/#unocss-preset)

They make it easy to style components based on their current state using modifiers.

**Available modifiers**

- `corvu-open` -\> `&[data-open]`
- `corvu-closed` -\> `&[data-closed]`
- `corvu-expanded` -\> `&[data-expanded]`
- `corvu-collapsed` -\> `&[data-collapsed]`
- `corvu-transitioning` -\> `&[data-transitioning]`
- `corvu-opening` -\> `&[data-opening]`
- `corvu-closing` -\> `&[data-closing]`
- `corvu-snapping` -\> `&[data-snapping]`
- `corvu-resizing` -\> `&[data-resizing]`
- `corvu-disabled` -\> `&[data-disabled]`
- `corvu-active` -\> `&[data-active]`
- `corvu-dragging` -\> `&[data-dragging]`
- `corvu-selected` -\> `&[data-selected]`
- `corvu-today` -\> `&[data-today]`
- `corvu-range-start` -\> `&[data-range-start]`
- `corvu-range-end` -\> `&[data-range-end]`
- `corvu-in-range` -\> `&[data-in-range]`
- `corvu-side-top` -\> `&[data-side='top']`
- `corvu-side-right` -\> `&[data-side='right']`
- `corvu-side-bottom` -\> `&[data-side='bottom']`
- `corvu-side-left` -\> `&[data-side='left']`

These two CSS framework use similar syntax. You can style components like this:

```
<Dialog.Content
  class="corvu-open:animate-in corvu-closed:animate-out"
>
  ...
</Dialog.Content>
```

## Animation [Section titled Animation](https://corvu.dev/docs/styling/\#animation)

corvu has built-in support for CSS animations and waits for any pending animation to finish before removing an element from the DOM. This means you can use CSS animations to animate the appearance and disappearance of primitives. Every unmountable component also provides a `forceMount` property which forces it to stay mounted in the DOM even when it is not visible. This is useful when using third-party animation libraries.

Developed and designed by [Jasmin](https://github.com/GiyoMoon/)