v1.0.6

HeroUI Native v1.0.6 centralizes styling by migrating every component from inline Tailwind class strings to dedicated BEM-named CSS files under src/styles/components, keeping the tv() slots as thin references to those classes for easier overriding and maintenance. This release also fixes a PortalHost reconciliation bug where sheets, dialogs, and popovers could inherit each other's state across screens — producing "ghost" open sheets — by keying each portal subtree by its unique name.

Installation

Update to the latest version:

npm i heroui-native

pnpm add heroui-native

yarn add heroui-native

bun add heroui-native

Try It on Your Device

Styling

Component Styles Migrated to Dedicated CSS Classes

Every component's styling has moved from long inline Tailwind class strings inside each *.styles.ts file to dedicated BEM-named CSS files under src/styles/components, wired through src/styles/index.css. The tv() slots now act as thin references to these CSS classes, centralizing styling and making components far easier to override and maintain.

Improvements:

• Extracts styles for all ~40 components into BEM-structured .css files, wired through src/styles/index.css
• Keeps tv() slots as thin references to the new CSS classes rather than inline Tailwind strings
• Adds an element-disabled utility
• Cleans up related utilities and dependencies

Public component APIs are unchanged, so no code changes are required. Consumers must ensure src/styles/index.css is loaded for components to render correctly.

Related PR: #452

Bug Fixes

PortalHost Ghost Sheets

PortalHost previously rendered all registered portals as an unkeyed array, so React reconciled them by index. When a portal registered or unregistered mid-list — for example when a screen unmounted — sibling portals shifted index and React grafted one portal's live component state onto a different portal's content. For bottom sheets this adopted the internal sheet instance and its animated position, so a closed sheet could appear fully open ("ghost" sheet) while an open sheet could inherit a closed instance and never become visible.

Each portal subtree is now keyed by its unique portal name, so React tracks portals by identity instead of array position. This resolves the ghost-sheet behavior across BottomSheet, Dialog, Popover, and Select portals and is a likely root cause behind intermittent bottom-sheet visibility failures.

This release includes fixes for the following issues:

• Issue #441: Fixed PortalHost rendering portals as an unkeyed array, which caused sheets and dialogs to inherit each other's state when a screen unmounted, resulting in "ghost" open sheets showing unrelated content. Portals are now keyed by name so each subtree is tracked by identity.

Related PR: #442

Links

• Component Documentation
• GitHub Repository

Contributors

Thanks to everyone who contributed to this release!