fix(spinner): cater global spinner variant

[wingkwong]

Closes #5939

📝 Description

⛳️ Current behavior (updates)

🚀 New behavior

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

📝 Additional Information

Summary by CodeRabbit

• New Features
  • Spinners now support global variant configuration through HeroUIProvider, enabling consistent styling across your application without repeating variant props.
  • Individual spinner variants can override the global setting when explicitly specified for component-level customization.

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

[changeset-bot]

🦋 Changeset detected

Latest commit: ab0f06f

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

This PR includes changesets to release 13 packages

Name	Type
@heroui/spinner	Patch
@heroui/button	Patch
@heroui/select	Patch
@heroui/toast	Patch
@heroui/react	Patch
@heroui/alert	Patch
@heroui/autocomplete	Patch
@heroui/calendar	Patch
@heroui/date-picker	Patch
@heroui/dropdown	Patch
@heroui/number-input	Patch
@heroui/popover	Patch
@heroui/snippet	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]

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

Project	Deployment	Preview	Comments	Updated (UTC)
heroui	Ready	Preview	Comment	Nov 26, 2025 6:16am
heroui-sb	Ready	Preview	Comment	Nov 26, 2025 6:16am

[coderabbitai]

Walkthrough

A changeset file, test cases, and hook modification address a bug where HeroUIProvider's spinnerVariant setting was not being applied to Spinner components. The useSpinner hook now includes variant in its dependency array and spreads variantProps alongside variant to enable proper variant resolution.

Changes

Cohort / File(s)	Summary
Changeset .changeset/perfect-toes-cry.md	Added patch release changeset for @heroui/spinner to support global spinner variant configuration.
Tests packages/components/spinner/__tests__/spinner.test.tsx	Added two test cases verifying that Spinner adopts the global spinnerVariant from HeroUIProvider when no variant prop is defined, and respects explicit variant props when provided.
Hook Implementation packages/components/spinner/src/use-spinner.ts	Modified useSpinner to spread variantProps together with variant in the memoized invocation and added both objectToDeps(variantProps) and variant to dependency array for proper slot recomputation.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

• Hook logic change is focused but requires verification of dependency array correctness
• Tests are straightforward validations of the fix
• Consider confirming that the dependency tracking properly captures all variant changes needed for slot updates

Suggested reviewers

• jrgarciadev

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The PR description is incomplete; only the issue number is filled in while all content sections (Description, Current behavior, New behavior, Breaking change, Additional Information) are empty.	Complete the description template by adding content to Description, Current behavior, New behavior, and Breaking change sections to explain the bug fix.
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 (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The PR title clearly describes the main change: fixing the spinner component to support the global spinnerVariant from HeroUIProvider.
Linked Issues check	✅ Passed	The PR changes address the linked issue #5939 by implementing global spinnerVariant support in the Spinner component through variant props handling and provider integration.
Out of Scope Changes check	✅ Passed	All changes are directly related to fixing the HeroUIProvider spinnerVariant inheritance issue; no out-of-scope modifications were introduced.

✨ Finishing touches

• 📝 Generate docstrings

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch fix/issue-5939

---

📜 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 ce0c298 and ab0f06f.

📒 Files selected for processing (3)

• .changeset/perfect-toes-cry.md (1 hunks)
• packages/components/spinner/__tests__/spinner.test.tsx (2 hunks)
• packages/components/spinner/src/use-spinner.ts (1 hunks)

🧰 Additional context used

🧠 Learnings (1)

📚 Learning: 2025-10-25T17:08:46.283Z

Learnt from: adbjo
Repo: heroui-inc/heroui PR: 5846
File: packages/components/tabs/src/tabs.tsx:156-157
Timestamp: 2025-10-25T17:08:46.283Z
Learning: In packages/components/tabs/src/tabs.tsx, the renderTabs useMemo dependency array intentionally includes `variant` and `isVertical` to prevent potential side-effects, even though they might appear redundant based on static analysis.

Applied to files:

• packages/components/spinner/src/use-spinner.ts

🧬 Code graph analysis (1)

packages/components/spinner/src/use-spinner.ts (3)

packages/core/system-rsc/src/extend-variants.js (1)

• slots (107-107)

packages/core/theme/src/components/spinner.ts (1)

• spinner (319-319)

packages/utilities/shared-utils/src/common/functions.ts (1)

• objectToDeps (149-159)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

• GitHub Check: TypeScript
• GitHub Check: ESLint
• GitHub Check: Build
• GitHub Check: Continuous Release

🔇 Additional comments (5)

.changeset/perfect-toes-cry.md (1)

1-5: LGTM! Changeset follows conventions.

The changeset correctly specifies a patch release for the spinner component with a clear reference to the issue being fixed.

packages/components/spinner/src/use-spinner.ts (1)

48-51: LGTM! Proper fix for global variant propagation.

The changes correctly address the issue:

• Spreading variant alongside variantProps ensures the resolved variant (from props or global context) is passed to the spinner function
• Including variant in the dependency array ensures re-computation when the global spinnerVariant changes
• The spread order {...variantProps, variant} correctly prioritizes the resolved variant over any variant in variantProps

Based on learnings, including variant in the dependency array is an intentional pattern used in similar components to prevent side-effects.

packages/components/spinner/__tests__/spinner.test.tsx (3)

3-3: LGTM! Required import for global variant testing.

The HeroUIProvider import is necessary for testing the global spinnerVariant behavior.

---

45-53: LGTM! Test correctly verifies global variant inheritance.

The test properly validates that a Spinner without an explicit variant prop adopts the spinnerVariant from HeroUIProvider. The class selector approach is reasonable for this scenario.

---

55-63: LGTM! Test correctly verifies local variant override.

The test properly validates that an explicit variant prop on Spinner takes precedence over the global spinnerVariant from HeroUIProvider. Together with the previous test, these cases comprehensively cover the global variant behavior.

---

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

• X
• Mastodon
• Reddit
• LinkedIn

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

[pkg-pr-new]

Open in StackBlitz

@heroui/accordion

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

@heroui/alert

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

@heroui/autocomplete

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

@heroui/avatar

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

@heroui/badge

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

@heroui/breadcrumbs

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

@heroui/button

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

@heroui/calendar

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

@heroui/card

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

@heroui/checkbox

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

@heroui/chip

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

@heroui/code

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

@heroui/date-input

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

@heroui/date-picker

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

@heroui/divider

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

@heroui/drawer

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

@heroui/dropdown

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

@heroui/form

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

@heroui/image

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

@heroui/input

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

@heroui/input-otp

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

@heroui/kbd

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

@heroui/link

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

@heroui/listbox

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

@heroui/menu

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

@heroui/modal

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

@heroui/navbar

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

@heroui/number-input

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

@heroui/pagination

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

@heroui/popover

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

@heroui/progress

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

@heroui/radio

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

@heroui/ripple

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

@heroui/scroll-shadow

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

@heroui/select

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

@heroui/skeleton

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

@heroui/slider

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

@heroui/snippet

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

@heroui/spacer

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

@heroui/spinner

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

@heroui/switch

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

@heroui/table

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

@heroui/tabs

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

@heroui/toast

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

@heroui/tooltip

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

@heroui/user

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

@heroui/react

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

@heroui/system

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

@heroui/system-rsc

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

@heroui/theme

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

@heroui/use-aria-accordion

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

@heroui/use-aria-accordion-item

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

@heroui/use-aria-button

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

@heroui/use-aria-link

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

@heroui/use-aria-modal-overlay

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

@heroui/use-aria-multiselect

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

@heroui/use-aria-overlay

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

@heroui/use-callback-ref

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

@heroui/use-clipboard

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

@heroui/use-data-scroll-overflow

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

@heroui/use-disclosure

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

@heroui/use-draggable

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

@heroui/use-form-reset

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

@heroui/use-image

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

@heroui/use-infinite-scroll

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

@heroui/use-intersection-observer

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

@heroui/use-is-mobile

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

@heroui/use-is-mounted

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

@heroui/use-measure

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

@heroui/use-pagination

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

@heroui/use-real-shape

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

@heroui/use-ref-state

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

@heroui/use-resize

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

@heroui/use-safe-layout-effect

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

@heroui/use-scroll-position

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

@heroui/use-ssr

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

@heroui/use-theme

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

@heroui/use-update-effect

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

@heroui/use-viewport-size

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

@heroui/aria-utils

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

@heroui/dom-animation

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

@heroui/framer-utils

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

@heroui/react-rsc-utils

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

@heroui/react-utils

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

@heroui/shared-icons

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

@heroui/shared-utils

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

@heroui/stories-utils

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

@heroui/test-utils

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

commit: ab0f06f