Segment ghost variant + dynamic width, AppLayout content-scroll mode, FileTree checkboxes, EmojiReactionButton read-only, and keyboard support for PressableFeedback.
This release adds a ghost variant and dynamic-width items to Segment, a content-scroll mode to AppLayout, read-only support for EmojiReactionButton, and automatic checkbox rendering in FileTree.
⚠️ Breaking changes: @gravity-ui/icons removed as a runtime dependency (now bundled); NumberStepper sizes decreased one step across all variants.
Transparent container with an accent-colored indicator — ideal for inline navigation embedded in toolbars or cards.
Render-prop Segment items that expand from icon-only to icon + label on selection — dynamic width driven by CSS grid transitions.
New scrollMode="content" prop keeps the shell fixed to the viewport while only the main column scrolls. The main region becomes focusable so browsers provide native PageUp/PageDown/Arrow scrolling without custom handlers.
New isReadOnly prop displays reactions without responding to interaction — no press handlers fire, and the button is excluded from tab order.
Checkboxes auto-render when selectionBehavior="toggle". The chevron also gained a hover state for better affordance.
Full-featured sidebar demo with command palette, offcanvas mode, and nested navigation.
Updated complex sidebar demo with teamspaces, agents, favorites, recents, and ghost segment navigation.
mix-blend-mode: difference for visibility on arbitrary slide backgroundsrollup-plugin-preserve-directives so directives survive terser minification@gravity-ui/icons moved from dependencies to devDependencies; icons are compiled into the output, consumers no longer need it installed@gravity-ui/icons no longer a runtime dependencyIcons used by HeroUI Pro components are now bundled into the package output. If you were importing from @gravity-ui/icons via HeroUI Pro's node_modules, install it directly:
npm install @gravity-ui/iconsNo action needed if you only use HeroUI Pro components — they continue to work as before.
All button sizes are one step smaller:
| Variant | Before | After |
|---|---|---|
| sm | h-9 / md:h-8 | h-8 / md:h-7 |
| md | h-10 / md:h-9 | h-9 / md:h-8 |
| lg | h-11 / md:h-10 | h-10 / md:h-9 |
Layouts with exact height constraints on the stepper may need adjustment.
npx heroui-proSelect Update HeroUI Pro React to x.x.x (latest) from the interactive menu.