fix(system-rsc): extendVariants rendering behavior with as

[ITBoomBKStudio]

⚽️ Current behavior (updates)

When using the as prop with components created via extendVariants, the component was rendered as the value passed to as instead of rendering as the original base component.
This caused components to lose the original rendering semantics and styles.

🚀 New behavior

Components created with extendVariants now always render as the original base component.
The as prop no longer changes the rendered element, restoring the expected rendering behavior.

[changeset-bot]

🦋 Changeset detected

Latest commit: 3c0c1a2

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 37 packages

Name	Type
@heroui/system-rsc	Patch
@heroui/code	Patch
@heroui/divider	Patch
@heroui/kbd	Patch
@heroui/spacer	Patch
@heroui/spinner	Patch
@heroui/system	Patch
@heroui/react	Patch
@heroui/accordion	Patch
@heroui/listbox	Patch
@heroui/menu	Patch
@heroui/button	Patch
@heroui/select	Patch
@heroui/table	Patch
@heroui/toast	Patch
@heroui/alert	Patch
@heroui/autocomplete	Patch
@heroui/calendar	Patch
@heroui/checkbox	Patch
@heroui/date-input	Patch
@heroui/date-picker	Patch
@heroui/drawer	Patch
@heroui/dropdown	Patch
@heroui/form	Patch
@heroui/input-otp	Patch
@heroui/input	Patch
@heroui/modal	Patch
@heroui/navbar	Patch
@heroui/number-input	Patch
@heroui/popover	Patch
@heroui/radio	Patch
@heroui/slider	Patch
@heroui/snippet	Patch
@heroui/tabs	Patch
@heroui/tooltip	Patch
@heroui/aria-utils	Patch
@heroui/framer-utils	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[vercel]

@ITBoomBKStudio is attempting to deploy a commit to the HeroUI Inc Team on Vercel.

A member of the Team first needs to authorize it.

[jrgarciadev]

@wingkwong please check

[pkg-pr-new]

Open in StackBlitz

@heroui/accordion

npm i https://pkg.pr.new/@heroui/accordion@6215

@heroui/alert

npm i https://pkg.pr.new/@heroui/alert@6215

@heroui/autocomplete

npm i https://pkg.pr.new/@heroui/autocomplete@6215

@heroui/avatar

npm i https://pkg.pr.new/@heroui/avatar@6215

@heroui/badge

npm i https://pkg.pr.new/@heroui/badge@6215

@heroui/breadcrumbs

npm i https://pkg.pr.new/@heroui/breadcrumbs@6215

@heroui/button

npm i https://pkg.pr.new/@heroui/button@6215

@heroui/calendar

npm i https://pkg.pr.new/@heroui/calendar@6215

@heroui/card

npm i https://pkg.pr.new/@heroui/card@6215

@heroui/checkbox

npm i https://pkg.pr.new/@heroui/checkbox@6215

@heroui/chip

npm i https://pkg.pr.new/@heroui/chip@6215

@heroui/code

npm i https://pkg.pr.new/@heroui/code@6215

@heroui/date-input

npm i https://pkg.pr.new/@heroui/date-input@6215

@heroui/date-picker

npm i https://pkg.pr.new/@heroui/date-picker@6215

@heroui/divider

npm i https://pkg.pr.new/@heroui/divider@6215

@heroui/drawer

npm i https://pkg.pr.new/@heroui/drawer@6215

@heroui/dropdown

npm i https://pkg.pr.new/@heroui/dropdown@6215

@heroui/form

npm i https://pkg.pr.new/@heroui/form@6215

@heroui/image

npm i https://pkg.pr.new/@heroui/image@6215

@heroui/input

npm i https://pkg.pr.new/@heroui/input@6215

@heroui/input-otp

npm i https://pkg.pr.new/@heroui/input-otp@6215

@heroui/kbd

npm i https://pkg.pr.new/@heroui/kbd@6215

@heroui/link

npm i https://pkg.pr.new/@heroui/link@6215

@heroui/listbox

npm i https://pkg.pr.new/@heroui/listbox@6215

@heroui/menu

npm i https://pkg.pr.new/@heroui/menu@6215

@heroui/modal

npm i https://pkg.pr.new/@heroui/modal@6215

@heroui/navbar

npm i https://pkg.pr.new/@heroui/navbar@6215

@heroui/number-input

npm i https://pkg.pr.new/@heroui/number-input@6215

@heroui/pagination

npm i https://pkg.pr.new/@heroui/pagination@6215

@heroui/popover

npm i https://pkg.pr.new/@heroui/popover@6215

@heroui/progress

npm i https://pkg.pr.new/@heroui/progress@6215

@heroui/radio

npm i https://pkg.pr.new/@heroui/radio@6215

@heroui/ripple

npm i https://pkg.pr.new/@heroui/ripple@6215

@heroui/scroll-shadow

npm i https://pkg.pr.new/@heroui/scroll-shadow@6215

@heroui/select

npm i https://pkg.pr.new/@heroui/select@6215

@heroui/skeleton

npm i https://pkg.pr.new/@heroui/skeleton@6215

@heroui/slider

npm i https://pkg.pr.new/@heroui/slider@6215

@heroui/snippet

npm i https://pkg.pr.new/@heroui/snippet@6215

@heroui/spacer

npm i https://pkg.pr.new/@heroui/spacer@6215

@heroui/spinner

npm i https://pkg.pr.new/@heroui/spinner@6215

@heroui/switch

npm i https://pkg.pr.new/@heroui/switch@6215

@heroui/table

npm i https://pkg.pr.new/@heroui/table@6215

@heroui/tabs

npm i https://pkg.pr.new/@heroui/tabs@6215

@heroui/toast

npm i https://pkg.pr.new/@heroui/toast@6215

@heroui/tooltip

npm i https://pkg.pr.new/@heroui/tooltip@6215

@heroui/user

npm i https://pkg.pr.new/@heroui/user@6215

@heroui/react

npm i https://pkg.pr.new/@heroui/react@6215

@heroui/system

npm i https://pkg.pr.new/@heroui/system@6215

@heroui/system-rsc

npm i https://pkg.pr.new/@heroui/system-rsc@6215

@heroui/theme

npm i https://pkg.pr.new/@heroui/theme@6215

@heroui/use-aria-accordion

npm i https://pkg.pr.new/@heroui/use-aria-accordion@6215

@heroui/use-aria-accordion-item

npm i https://pkg.pr.new/@heroui/use-aria-accordion-item@6215

@heroui/use-aria-button

npm i https://pkg.pr.new/@heroui/use-aria-button@6215

@heroui/use-aria-link

npm i https://pkg.pr.new/@heroui/use-aria-link@6215

@heroui/use-aria-modal-overlay

npm i https://pkg.pr.new/@heroui/use-aria-modal-overlay@6215

@heroui/use-aria-multiselect

npm i https://pkg.pr.new/@heroui/use-aria-multiselect@6215

@heroui/use-aria-overlay

npm i https://pkg.pr.new/@heroui/use-aria-overlay@6215

@heroui/use-callback-ref

npm i https://pkg.pr.new/@heroui/use-callback-ref@6215

@heroui/use-clipboard

npm i https://pkg.pr.new/@heroui/use-clipboard@6215

@heroui/use-data-scroll-overflow

npm i https://pkg.pr.new/@heroui/use-data-scroll-overflow@6215

@heroui/use-disclosure

npm i https://pkg.pr.new/@heroui/use-disclosure@6215

@heroui/use-draggable

npm i https://pkg.pr.new/@heroui/use-draggable@6215

@heroui/use-form-reset

npm i https://pkg.pr.new/@heroui/use-form-reset@6215

@heroui/use-image

npm i https://pkg.pr.new/@heroui/use-image@6215

@heroui/use-infinite-scroll

npm i https://pkg.pr.new/@heroui/use-infinite-scroll@6215

@heroui/use-intersection-observer

npm i https://pkg.pr.new/@heroui/use-intersection-observer@6215

@heroui/use-is-mobile

npm i https://pkg.pr.new/@heroui/use-is-mobile@6215

@heroui/use-is-mounted

npm i https://pkg.pr.new/@heroui/use-is-mounted@6215

@heroui/use-measure

npm i https://pkg.pr.new/@heroui/use-measure@6215

@heroui/use-pagination

npm i https://pkg.pr.new/@heroui/use-pagination@6215

@heroui/use-real-shape

npm i https://pkg.pr.new/@heroui/use-real-shape@6215

@heroui/use-ref-state

npm i https://pkg.pr.new/@heroui/use-ref-state@6215

@heroui/use-resize

npm i https://pkg.pr.new/@heroui/use-resize@6215

@heroui/use-safe-layout-effect

npm i https://pkg.pr.new/@heroui/use-safe-layout-effect@6215

@heroui/use-scroll-position

npm i https://pkg.pr.new/@heroui/use-scroll-position@6215

@heroui/use-ssr

npm i https://pkg.pr.new/@heroui/use-ssr@6215

@heroui/use-theme

npm i https://pkg.pr.new/@heroui/use-theme@6215

@heroui/use-update-effect

npm i https://pkg.pr.new/@heroui/use-update-effect@6215

@heroui/use-viewport-size

npm i https://pkg.pr.new/@heroui/use-viewport-size@6215

@heroui/aria-utils

npm i https://pkg.pr.new/@heroui/aria-utils@6215

@heroui/dom-animation

npm i https://pkg.pr.new/@heroui/dom-animation@6215

@heroui/framer-utils

npm i https://pkg.pr.new/@heroui/framer-utils@6215

@heroui/react-rsc-utils

npm i https://pkg.pr.new/@heroui/react-rsc-utils@6215

@heroui/react-utils

npm i https://pkg.pr.new/@heroui/react-utils@6215

@heroui/shared-icons

npm i https://pkg.pr.new/@heroui/shared-icons@6215

@heroui/shared-utils

npm i https://pkg.pr.new/@heroui/shared-utils@6215

@heroui/stories-utils

npm i https://pkg.pr.new/@heroui/stories-utils@6215

@heroui/test-utils

npm i https://pkg.pr.new/@heroui/test-utils@6215

commit: 3c0c1a2

[ITBoomBKStudio]

Hey @jrgarciadev and @wingkwong 👋

I ran into a confusing inconsistency with extendVariants and ForwardedComponent.

Depending on how the as prop is handled, the behavior differs between environments:

• One implementation works correctly in production but fails in Jest tests
• The other passes Jest tests but breaks rendering and styling in production

Below are the two versions that demonstrate the issue.

Version that works in production

const ForwardedComponent = React.forwardRef((originalProps = {}, ref) => {
  const newProps = React.useMemo(
    () =>
      getClassNamesWithProps(
        {
          slots,
          variants,
          compoundVariants,
          props: originalProps,
          defaultVariants,
          hasSlots,
          opts,
        },
        [originalProps],
      ),
    [originalProps],
  );

  return React.createElement(BaseComponent, {
    ...originalProps,
    ...newProps,
    ref,
  });
});

Version that works in Jest tests

const ForwardedComponent = React.forwardRef((originalProps = {}, ref) => {
  // Extract `as` prop if present
  const { as: Component = BaseComponent, ...restProps } = originalProps;

  const newProps = React.useMemo(
    () =>
      getClassNamesWithProps(
        {
          slots,
          variants,
          compoundVariants,
          props: restProps,
          defaultVariants,
          hasSlots,
          opts,
        },
        [restProps],
      ),
    [restProps],
  );

  return React.createElement(Component, {
    ...restProps,
    ...newProps,
    ref,
  });
});

In the second version, components render as the value passed to as instead of rendering as the original base component, which causes styling and rendering issues in production.

This PR restores consistent rendering behavior by ensuring components created with extendVariants always render as the original base component, while still allowing as to be used in the styling logic.

[ITBoomBKStudio]

Summary

I’ve completely rewritten the test file to better reflect the actual behavior and responsibilities of extendVariants.

In the process, I also fixed a serious issue with chained extendVariants inheritance, where compound variants and slot styles could not reliably reference variants defined in base components. With this fix, variant matching and slot resolution now behave consistently across multiple extension levels.

As a result, production behavior and test expectations are now aligned and predictable.

Some additional cleanup may still be needed in related files, but the core logic and tests are now in a good and stable state.

[ITBoomBKStudio]

@jrgarciadev @wingkwong
It would be really appreciated if this PR could be released as a hotfix.

At the moment, this issue causes broken behavior in one of my projects, and having this fix available sooner would help a lot.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
heroui	Ready	Preview, Comment	Feb 12, 2026 2:33pm
heroui-sb	Ready	Preview, Comment	Feb 12, 2026 2:33pm