Styling

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

Data attributes Section titled 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:

• TailwindCSS plugin
• 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]

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

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.