v3.2.6

Patch release: AvatarGroup returns as a dedicated component, focus rings are keyboard-only again on ListBox, Dropdown, Select, and overlay triggers after a mouse-driven open, @internationalized/date moves to peerDependencies while tailwind-merge and @react-aria/i18n are dropped, ColorSlider no longer warns on every render in production, bare .tag markup keeps its default padding, Breadcrumbs sit back on the spacing grid, and React Aria is upgraded to 1.21.1 (react-aria@3.52.1). Context values are also memoized across 43 components, so consumers no longer re-render on every root render.

Installation

Update to the latest version:

npm i @heroui/styles@latest @heroui/react@latest

pnpm add @heroui/styles@latest @heroui/react@latest

yarn add @heroui/styles@latest @heroui/react@latest

bun add @heroui/styles@latest @heroui/react@latest

Features

AvatarGroup

AvatarGroup stacks compound Avatar children and passes size, color, and variant down to its direct children, so a group is styled in one place. max truncates the visible avatars and counts the rest, isGrid swaps the overlap for a wrapping grid, and overlap chooses between the default crescent clip ("clip") and a solid outline ("ring"). For a known total from the server, render an explicit AvatarGroup.Count — it is not truncated by max and replaces the v2 total prop. The group carries no implicit role="group"; add role and a label when the stack is meaningful.

• AvatarGroup: Add the AvatarGroup component with max, isGrid, overlap, context-driven size / color / variant, and an AvatarGroup.Count overflow indicator (#6861).

Bug Fixes

• Focus: Show focus rings only on real keyboard focus again. v3.2.5 replaced :focus-visible:not(:focus) with native :focus-visible across 37 selectors, which made ListBox, Dropdown, and Select items ring when a mouse click opened the collection, and made triggers ring when React Aria restored focus on overlay close. The native fallback is now scoped to elements React Aria does not own, while React Aria surfaces keep using [data-focus-visible="true"] (#6849).
• ColorSlider: Gate the channel and colorSpace validation warnings behind NODE_ENV. getValidColorSpace runs in the render body, so a misconfigured slider logged on every render in production builds (#6847).
• Tag: Move the md padding and font size into the base .tag block so bare class="tag" markup renders with padding instead of collapsing, matching the default-size pattern used by the rest of the library. .tag--md is now an empty modifier (#6847).
• Breadcrumbs: Space crumbs with gap instead of per-item horizontal padding, so a stacked Breadcrumbs list sits on the spacing grid and lines up with surrounding content (#6854).
• Package exports: Put types first and add a default fallback in every generated export condition, so @heroui/react resolves correctly under moduleResolution: node16 and nextnode (#6847).
• Calendar: Keep year picker labels in sync with locale, time zone, and format changes, and rebuild the year grid only when its inputs change instead of on every render (#6851).

Performance

• Context values: Memoize the context value in 43 components that were passing a fresh object literal on every render, so consumers re-render only when their slots actually change. The largest wins are the components with the most consumers: Table, Pagination, Accordion, Tabs, Card, and Slider (#6852).
• Refs: Memoize merged refs in DatePicker, DateRangePicker, Autocomplete, and ScrollShadow. Passing a fresh merged ref was detaching and reattaching the DOM node on every render (#6852).
• Defaults: Replace inline [] defaults that defeated their own memo dependencies in InputOTP, DisclosureGroup, and ComboBox with shared empty constants (#6852).

Styles

• Dead classes removed: Drop CSS classes that were never applied by any component — the unused separator__* element classes, .checkbox--disabled, .radio--disabled, and .switch__label (Switch composes the shared Label). If you targeted any of these in a custom stylesheet, they never had an effect (#6853).
• Fieldset: Rename fieldset__field_group to fieldset__field-group for BEM consistency. Update any CSS override that targets the old class name (#6853).

Dependencies

• React Aria: Upgrade to react-aria-components@1.21.1 and react-aria@3.52.1 (#6848).
• Runtime dependencies: Bump the packages that ship with @heroui/react — @radix-ui/react-avatar to 1.2.6, which backs Avatar and AvatarGroup, and input-otp to 1.5.0, which backs InputOTP (#6866).
• Declarations: Promote @internationalized/date to peerDependencies, drop the unused tailwind-merge dependency (it already ships transitively through tailwind-variants, and pinning it directly caused duplicate copies), and drop @react-aria/i18n, which nothing in the library referenced but every consumer had to install (#6847).
• Security: Pin the transitive js-yaml and svgo used by the build tooling to patched versions (#6844).

@heroui/styles

• CSS subpath exports: Ship ./components/*.css, ./utilities, ./variants, ./themes/default, and ./base in the committed package.json so the published surface and monorepo consumers match (#6846).
• Selective imports: Fix the à-la-carte recipe in the README. Component CSS files @apply shared utilities and custom variants, so the utilities and variants prelude is required for the recipe to compile (#6846).

Links

• Component Docs
• GitHub Repository
• GitHub PR #6850

Contributors

Thanks to everyone who contributed to this release!