v3.0.2
Bug fixes, smoother Drawer transitions, new --backdrop theme variable, and style refinements for triggers, arrows, and tags.
Patch release with bug fixes, style refinements, and a new --backdrop theme variable. Drawer transitions are rewritten to native CSS for smoother animations. Overlay triggers now display as inline-block, and the default arrow shape for Tooltip + Popover is updated.
Installation
Update to the latest version:
npm i @heroui/styles@latest @heroui/react@latestpnpm add @heroui/styles@latest @heroui/react@latestyarn add @heroui/styles@latest @heroui/react@latestbun add @heroui/styles@latest @heroui/react@latestUsing AI assistants? Simply prompt "Hey Cursor, update HeroUI to the latest version" and your AI assistant will automatically compare versions and apply the necessary changes. Learn more about the HeroUI MCP Server.
What's New
--backdrop Theme Variable
New --backdrop CSS variable for overlay backdrops (#6375). Light theme defaults to rgba(0, 0, 0, 0.5), dark to rgba(0, 0, 0, 0.6). Modal, AlertDialog, and Drawer now reference this variable instead of hardcoded values.
Override it globally:
:root {
--backdrop: rgba(0, 0, 0, 0.7);
}Or use the utility class directly: bg-backdrop.
Style Improvements
Trigger inline-block Display
Trigger elements across Popover, Tooltip, Dropdown, Modal, AlertDialog, Drawer, and Disclosure now apply inline-block to prevent layout collapse when the trigger wraps inline content (#6373).
Tooltip & Popover Arrow
Default arrow SVG path updated from a quadratic curve to a cubic bezier for a smoother, more natural shape (#6372).
Tag Spacing
Increased horizontal padding on sm (px-1 to px-2) and md (px-1.5 to px-2) Tag sizes for better readability (#6315).
Bug Fixes
- Autocomplete:
--trigger-widthCSS variable on the popover now tracks the trigger element's width viauseResizeObserver, fixing misaligned dropdown widths (#6374) - Drawer: Panel transitions rewritten from Tailwind
animate-in/animate-outto native CSStranslatetransitions for smoother open/close animations across all placements (#6393) - InputGroup: Secondary variant focus background now triggers only when the actual input or textarea is focused, not on any focusable child within the group (#6362)
- Tag:
CloseButtoninside Tag now has an explicitaria-label="Remove tag"for screen readers (#6341)
Links
Contributors
Thanks to everyone who contributed to this release!
All Releases
All updates and changes to HeroUI v3, including new features, fixes, and breaking changes.
Introducing HeroUI v3
A ground-up rewrite for React and React Native. 75+ web components, 37 native components, Tailwind CSS v4, React Aria, compound architecture, and built for AI-assisted development.