fix(slots): extendVariants fn to support slots by deepansh946 · Pull Request #5895 · heroui-inc/heroui

deepansh946 · 2025-11-12T07:55:14Z

📝 Description

Adds support for direct slot overrides in extendVariants function. Users can now override base component slots globally using the slots option, which applies styles to specific slots regardless of variants. Variant-based slot overrides continue to work and merge with direct slots.

⛳️ Current behavior (updates)

Previously, the slots option in extendVariants was typed but not implemented. Attempting to override base component slots (e.g., label slot in Input component) had no effect, even when using !important specifiers.

🚀 New behavior

Direct slot overrides via slots option now work correctly
Direct slots merge with variant-based slots (both are applied)
Direct slots override inferred slots (empty strings from variants) in the slots object
Added comprehensive tests covering direct slots, merging behavior, and override precedence

Example usage:

const MyInput = extendVariants(Input, {
  slots: {
    label: "!font-medium",
  },
});

💣 Is this a breaking change (Yes/No):

No

📝 Additional Information

Implementation merges direct slots with inferred slots from variants
Direct slots are passed to tv() function as base slots, which then merge with variant-based slots
Documentation updated to reflect the new slots option capability
TypeScript types already included slots option, so no type changes needed

Summary by CodeRabbit

Bug Fixes
- Fixed slot override and merging behavior when extending component variants. Direct slots now properly merge with variant-defined slots, enabling developers to customize component slots with correct precedence and integration. This enhancement provides more control over component structure and composition when extending existing variants.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

changeset-bot · 2025-11-12T07:55:18Z

🦋 Changeset detected

Latest commit: 65def24

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 · 2025-11-12T07:55:20Z

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

A member of the Team first needs to authorize it.

coderabbitai · 2025-11-12T07:55:43Z

Walkthrough

This PR fixes a bug in the extendVariants function where the slots option in the styles configuration was not properly overriding base component slots. The implementation now merges explicit slots from styles.slots with inferred slots from variants, allowing direct slot overrides to take effect alongside variant-based slot definitions.

Changes

Cohort / File(s)	Change Summary
Slot merging logic `packages/core/system-rsc/src/extend-variants.js`	Modified `extendVariants` to compute `inferredSlots` from variants and merge them with `directSlots` (from `styles.slots`), enabling proper slot override behavior.
Test coverage `packages/core/system-rsc/__tests__/extend-variants.test.tsx`	Added three new tests validating direct slot overrides, merging of direct and variant-based slots, and precedence behavior when both affect the same slot.
Release metadata `.changeset/proud-terms-help.md`	Added patch-level version bump entry for the slot override fix.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Review focus areas:
- Verify the slot merging logic correctly combines directSlots and inferredSlots without unintended overwrites
- Confirm the test cases accurately reflect the expected precedence and merging behavior
- Check that the fix handles edge cases (empty slots, undefined slots, etc.)

Suggested reviewers

jrgarciadev

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	Title clearly summarizes the main change: implementing slots support in the extendVariants function.
Description check	✅ Passed	Description follows the template with all key sections completed: issue reference, current behavior, new behavior, breaking change status, and additional information.
Linked Issues check	✅ Passed	Code changes fully address issue #5785 objectives: direct slot overrides now work via slots option with proper merging and precedence semantics.
Out of Scope Changes check	✅ Passed	All changes are directly related to implementing slot override support: updated extend-variants.js logic, added comprehensive tests, and created changeset entry.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment

📜 Recent review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9b34bc2 and 65def24.

📒 Files selected for processing (2)

.changeset/proud-terms-help.md (1 hunks)
packages/core/system-rsc/src/extend-variants.js (1 hunks)

✅ Files skipped from review due to trivial changes (1)

.changeset/proud-terms-help.md

🚧 Files skipped from review as they are similar to previous changes (1)

packages/core/system-rsc/src/extend-variants.js

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

pkg-pr-new · 2025-11-12T08:06:55Z

Open in StackBlitz

@heroui/accordion

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

@heroui/alert

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

@heroui/autocomplete

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

@heroui/avatar

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

@heroui/badge

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

@heroui/breadcrumbs

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

@heroui/button

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

@heroui/calendar

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

@heroui/card

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

@heroui/checkbox

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

@heroui/chip

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

@heroui/code

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

@heroui/date-input

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

@heroui/date-picker

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

@heroui/divider

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

@heroui/drawer

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

@heroui/dropdown

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

@heroui/form

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

@heroui/image

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

@heroui/input

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

@heroui/input-otp

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

@heroui/kbd

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

@heroui/link

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

@heroui/listbox

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

@heroui/menu

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

@heroui/modal

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

@heroui/navbar

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

@heroui/number-input

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

@heroui/pagination

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

@heroui/popover

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

@heroui/progress

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

@heroui/radio

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

@heroui/ripple

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

@heroui/scroll-shadow

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

@heroui/select

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

@heroui/skeleton

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

@heroui/slider

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

@heroui/snippet

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

@heroui/spacer

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

@heroui/spinner

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

@heroui/switch

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

@heroui/table

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

@heroui/tabs

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

@heroui/toast

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

@heroui/tooltip

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

@heroui/user

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

@heroui/react

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

@heroui/system

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

@heroui/system-rsc

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

@heroui/theme

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

@heroui/use-aria-accordion

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

@heroui/use-aria-accordion-item

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

@heroui/use-aria-button

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

@heroui/use-aria-link

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

@heroui/use-aria-modal-overlay

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

@heroui/use-aria-multiselect

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

@heroui/use-aria-overlay

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

@heroui/use-callback-ref

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

@heroui/use-clipboard

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

@heroui/use-data-scroll-overflow

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

@heroui/use-disclosure

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

@heroui/use-draggable

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

@heroui/use-form-reset

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

@heroui/use-image

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

@heroui/use-infinite-scroll

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

@heroui/use-intersection-observer

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

@heroui/use-is-mobile

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

@heroui/use-is-mounted

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

@heroui/use-measure

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

@heroui/use-pagination

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

@heroui/use-real-shape

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

@heroui/use-ref-state

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

@heroui/use-resize

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

@heroui/use-safe-layout-effect

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

@heroui/use-scroll-position

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

@heroui/use-ssr

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

@heroui/use-theme

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

@heroui/use-update-effect

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

@heroui/use-viewport-size

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

@heroui/aria-utils

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

@heroui/dom-animation

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

@heroui/framer-utils

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

@heroui/react-rsc-utils

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

@heroui/react-utils

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

@heroui/shared-icons

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

@heroui/shared-utils

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

@heroui/stories-utils

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

@heroui/test-utils

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

commit: 65def24

deepansh946 · 2025-11-12T09:38:28Z

@wingkwong Please review the PR, I have made the required changes, added tests & also updated the documentation.

vercel · 2025-11-15T14:01:46Z

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

Project	Deployment	Preview	Comments	Updated (UTC)
heroui	Ready	Preview	Comment	Dec 11, 2025 0:34am
heroui-sb	Ready	Preview	Comment	Dec 11, 2025 0:34am

heroui-inc/heroui#5895 heroui-inc/heroui#5940 heroui-inc/heroui#5990 heroui-inc/heroui#5999

fix: extendVariants fn to support slots

9b34bc2

deepansh946 requested a review from jrgarciadev as a code owner November 12, 2025 07:55

wingkwong added this to the v2.8.6 milestone Nov 15, 2025

wingkwong self-assigned this Nov 15, 2025

vercel Bot deployed to Preview – heroui November 15, 2025 14:03 View deployment

vercel Bot deployed to Preview – heroui-sb November 15, 2025 14:03 View deployment

wingkwong added 4 commits December 11, 2025 20:22

Merge branch 'canary' into pr/5895

9e9be63

chore(docs): undo changes

99075d3

chore(changeset): add changeset

86f174d

chore(docs): new line

65def24

vercel Bot deployed to Preview – heroui-sb December 11, 2025 12:34 View deployment

vercel Bot deployed to Preview – heroui December 11, 2025 12:34 View deployment

wingkwong merged commit a37912e into heroui-inc:canary Dec 11, 2025
10 checks passed

github-actions Bot mentioned this pull request Dec 11, 2025

ci(changesets): 📦 version packages #5820

Merged

coderabbitai Bot mentioned this pull request Dec 12, 2025

fix(system-rsc): respect defaultVariants.className in extendVariants #5940

Merged

AnYiEE added a commit to AnYiEE/touhou-mystia-izakaya-assistant that referenced this pull request Dec 18, 2025

fix(components): apply HeroUI patches

34abd61

heroui-inc/heroui#5895 heroui-inc/heroui#5940 heroui-inc/heroui#5990 heroui-inc/heroui#5999

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(slots): extendVariants fn to support slots#5895

fix(slots): extendVariants fn to support slots#5895
wingkwong merged 5 commits into
heroui-inc:canaryfrom
deepansh946:fix/extend-variants-slots

deepansh946 commented Nov 12, 2025 •

edited by coderabbitai Bot

Loading

Uh oh!

changeset-bot Bot commented Nov 12, 2025 •

edited

Loading

Uh oh!

vercel Bot commented Nov 12, 2025

Uh oh!

coderabbitai Bot commented Nov 12, 2025 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Nov 12, 2025 •

edited

Loading

Uh oh!

deepansh946 commented Nov 12, 2025

Uh oh!

vercel Bot commented Nov 15, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

deepansh946 commented Nov 12, 2025 • edited by coderabbitai Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📝 Description

⛳️ Current behavior (updates)

🚀 New behavior

💣 Is this a breaking change (Yes/No):

📝 Additional Information

Summary by CodeRabbit

Uh oh!

changeset-bot Bot commented Nov 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

vercel Bot commented Nov 12, 2025

Uh oh!

coderabbitai Bot commented Nov 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Estimated code review effort

Suggested reviewers

Pre-merge checks and finishing touches

Uh oh!

pkg-pr-new Bot commented Nov 12, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

deepansh946 commented Nov 12, 2025

Uh oh!

vercel Bot commented Nov 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

deepansh946 commented Nov 12, 2025 •

edited by coderabbitai Bot

Loading

changeset-bot Bot commented Nov 12, 2025 •

edited

Loading

coderabbitai Bot commented Nov 12, 2025 •

edited

Loading

pkg-pr-new Bot commented Nov 12, 2025 •

edited

Loading

vercel Bot commented Nov 15, 2025 •

edited

Loading