Animation
Add smooth animations and transitions to HeroUI Pro components
HeroUI Pro components follow the exact same animation patterns as HeroUI OSS — built-in CSS transitions via data attributes, custom CSS animations, and JavaScript libraries like Motion (prev. Framer Motion) all work the same way.
Read the full Animation guide on heroui.com to learn about data-attribute-driven animations, Motion integration, reduced motion support, and performance best practices.
Pro components use the same data attributes for animation states:
/* Works on both OSS and Pro components */
.sheet__content[data-entering] {
animation: slide-up 200ms ease-out;
}
.command__container[data-exiting] {
animation: fade-out 150ms ease-in;
}See each component's documentation for the specific data attributes and CSS classes available for animation.