fix(theme): tab cursor by wingkwong · Pull Request #5816 · heroui-inc/heroui

wingkwong · 2025-10-16T10:42:58Z

Closes [BUG] - Tabs curser expands instead of moving between tabs #5790
Closes [BUG] - Tab component breaks cursor movement and styling in RTL direction after selection (v2.8.5) #5809

📝 Description

⛳️ Current behavior (updates)

🚀 New behavior

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

📝 Additional Information

Summary by CodeRabbit

Release Notes

Bug Fixes
- Fixed tab cursor styling and display behavior

linear · 2025-10-16T10:43:01Z

ENG-2838 [BUG] - Tabs curser expands instead of moving between tabs

changeset-bot · 2025-10-16T10:43:02Z

🦋 Changeset detected

Latest commit: cbe5fba

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

This PR includes changesets to release 14 packages

Name	Type
@heroui/tabs	Patch
@heroui/theme	Patch
@heroui/react	Patch
@heroui/autocomplete	Patch
@heroui/checkbox	Patch
@heroui/date-input	Patch
@heroui/date-picker	Patch
@heroui/form	Patch
@heroui/input-otp	Patch
@heroui/input	Patch
@heroui/number-input	Patch
@heroui/radio	Patch
@heroui/select	Patch
@heroui/table	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-10-16T10:43:06Z

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

Project	Deployment	Preview	Comments	Updated (UTC)
heroui	Ready	Preview	Comment	Oct 16, 2025 1:19pm
heroui-sb	Ready	Preview	Comment	Oct 16, 2025 1:19pm

coderabbitai · 2025-10-16T10:43:17Z

Walkthrough

This patch release updates the tabs component theme configuration and peer dependencies to fix tab cursor movement issues. The explicit cursor styling is removed from tab variants to resolve expanding cursor behavior in both LTR and RTL directions.

Changes

Cohort / File(s)	Summary
Changeset `.changeset/famous-panthers-rush.md`	New changeset documenting patch-level updates for @heroui/tabs and @heroui/theme packages, noting a fix for tab cursor expansion (issues #5790, #5809).
Dependency Update `packages/components/tabs/package.json`	Updated @heroui/theme peer dependency constraint from >=2.4.22 to >=2.4.23 to ensure compatible theme version.
Theme Configuration `packages/core/theme/src/components/tabs.ts`	Removed explicit cursor property definitions from solid, light, and bordered tab variants to fix cursor movement and styling behavior.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

#5705 — Previous tabs theme implementation changes; related through shared modifications to tabs.ts and @heroui/tabs ↔ @heroui/theme peer dependency updates.

Suggested reviewers

jrgarciadev
winchesHe

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description Check	⚠️ Warning	The pull request description includes the required "Closes" references to issues #5790 and #5809, which is helpful. However, all the substantive description template sections (Description, Current behavior, New behavior, Breaking change, and Additional Information) are left empty with only placeholder text. The author has not filled in any details about what was changed or why, leaving critical context missing from the PR description itself.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The pull request title "fix(theme): tab cursor" is concise, follows conventional commit format, and clearly communicates the main purpose of the changeset. It accurately reflects the primary change: fixing cursor-related issues in the theme package's tab component. The title is specific enough to convey the scope without being overly verbose.
Linked Issues Check	✅ Passed	The code changes directly address both linked issues. Issue #5790 reports that the tab cursor expands instead of moving smoothly between tabs, and issue #5809 reports cursor styling and movement breaking in RTL direction. The PR removes explicit cursor styling from tab component variants in the theme configuration (solid variant now has empty config, light and bordered variants no longer specify cursor properties), which likely resolves both issues by allowing proper cursor animation and positioning without conflicting style definitions. The peer dependency version bump to @heroui/theme and the changeset record confirm this is the intended fix for these cursor-related problems.
Out of Scope Changes Check	✅ Passed	All changes in this pull request are directly scoped to addressing the tab cursor issues identified in #5790 and #5809. The changeset file documents the patch release appropriately, the package.json peer dependency update reflects the theme version change, and the theme configuration modification in tabs.ts is the core fix. No unrelated code changes, formatting updates, or out-of-scope modifications are present.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ 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/eng-2838

📜 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 3737870 and cbe5fba.

📒 Files selected for processing (3)

.changeset/famous-panthers-rush.md (1 hunks)
packages/components/tabs/package.json (1 hunks)
packages/core/theme/src/components/tabs.ts (1 hunks)

⏰ 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). (3)

GitHub Check: TypeScript
GitHub Check: Build
GitHub Check: Continuous Release

🔇 Additional comments (3)

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

88-88: LGTM! Cursor styling centralized correctly.

Removing the explicit cursor styling from the solid variant allows the cursor to inherit the base styling (lines 67-75) and compound variant styling (lines 198-244) consistently. This should fix the cursor expansion issue in both LTR and RTL modes by eliminating conflicting style overrides.

packages/components/tabs/package.json (1)

40-40: LGTM! Dependency bump ensures compatibility.

The peer dependency update to >=2.4.23 correctly ensures that the tabs component requires the theme version containing the cursor fix.

.changeset/famous-panthers-rush.md (1)

1-6: LGTM! Changeset properly documents the fix.

The changeset correctly documents patch-level releases for both affected packages and references the issues being resolved.

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-10-16T10:49:16Z

Open in StackBlitz

@heroui/accordion

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

@heroui/alert

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

@heroui/autocomplete

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

@heroui/avatar

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

@heroui/badge

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

@heroui/breadcrumbs

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

@heroui/button

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

@heroui/calendar

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

@heroui/card

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

@heroui/checkbox

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

@heroui/chip

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

@heroui/code

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

@heroui/date-input

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

@heroui/date-picker

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

@heroui/divider

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

@heroui/drawer

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

@heroui/dropdown

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

@heroui/form

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

@heroui/image

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

@heroui/input

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

@heroui/input-otp

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

@heroui/kbd

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

@heroui/link

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

@heroui/listbox

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

@heroui/menu

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

@heroui/modal

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

@heroui/navbar

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

@heroui/number-input

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

@heroui/pagination

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

@heroui/popover

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

@heroui/progress

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

@heroui/radio

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

@heroui/ripple

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

@heroui/scroll-shadow

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

@heroui/select

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

@heroui/skeleton

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

@heroui/slider

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

@heroui/snippet

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

@heroui/spacer

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

@heroui/spinner

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

@heroui/switch

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

@heroui/table

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

@heroui/tabs

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

@heroui/toast

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

@heroui/tooltip

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

@heroui/user

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

@heroui/react

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

@heroui/system

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

@heroui/system-rsc

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

@heroui/theme

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

@heroui/aria-utils

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

@heroui/dom-animation

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

@heroui/framer-utils

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

@heroui/react-rsc-utils

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

@heroui/react-utils

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

@heroui/shared-icons

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

@heroui/shared-utils

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

@heroui/stories-utils

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

@heroui/test-utils

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

@heroui/use-aria-accordion

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

@heroui/use-aria-accordion-item

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

@heroui/use-aria-button

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

@heroui/use-aria-link

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

@heroui/use-aria-modal-overlay

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

@heroui/use-aria-multiselect

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

@heroui/use-aria-overlay

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

@heroui/use-callback-ref

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

@heroui/use-clipboard

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

@heroui/use-data-scroll-overflow

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

@heroui/use-disclosure

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

@heroui/use-draggable

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

@heroui/use-form-reset

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

@heroui/use-image

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

@heroui/use-infinite-scroll

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

@heroui/use-intersection-observer

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

@heroui/use-is-mobile

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

@heroui/use-is-mounted

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

@heroui/use-measure

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

@heroui/use-pagination

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

@heroui/use-real-shape

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

@heroui/use-ref-state

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

@heroui/use-resize

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

@heroui/use-safe-layout-effect

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

@heroui/use-scroll-position

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

@heroui/use-ssr

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

@heroui/use-theme

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

@heroui/use-update-effect

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

@heroui/use-viewport-size

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

commit: cbe5fba

fix(theme): remove inset-0 for tab cursor

eaace65

vercel Bot deployed to Preview – heroui-sb October 16, 2025 10:44 View deployment

vercel Bot deployed to Preview – heroui October 16, 2025 10:46 View deployment

wingkwong added 2 commits October 16, 2025 21:13

chore(deps): bump theme peerDep

8bc97eb

chore: add changeset

cbe5fba

wingkwong marked this pull request as ready for review October 16, 2025 13:15

wingkwong requested a review from jrgarciadev as a code owner October 16, 2025 13:15

wingkwong added this to the v2.8.6 milestone Oct 16, 2025

vercel Bot deployed to Preview – heroui-sb October 16, 2025 13:16 View deployment

vercel Bot deployed to Preview – heroui October 16, 2025 13:19 View deployment

wingkwong merged commit b38a2cf into canary Oct 17, 2025
10 checks passed

wingkwong deleted the fix/eng-2838 branch October 17, 2025 02:41

github-actions Bot mentioned this pull request Oct 17, 2025

ci(changesets): 📦 version packages #5820

Merged

coderabbitai Bot mentioned this pull request Oct 25, 2025

fix(tabs): responsive resize cursor to match selected tab #5846

Merged

github-actions Bot mentioned this pull request Oct 29, 2025

ci(changesets): 📦 release packages vezham/heroui-v2--old#1

Closed

coderabbitai Bot mentioned this pull request Nov 18, 2025

[Security] Fix HIGH vulnerability: yaml.github-actions.security.run-shell-injection.run-shell-injection #5906

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(theme): tab cursor#5816

fix(theme): tab cursor#5816
wingkwong merged 3 commits into
canaryfrom
fix/eng-2838

wingkwong commented Oct 16, 2025 •

edited by coderabbitai Bot

Loading

Uh oh!

linear Bot commented Oct 16, 2025

Uh oh!

changeset-bot Bot commented Oct 16, 2025 •

edited

Loading

Uh oh!

vercel Bot commented Oct 16, 2025 •

edited

Loading

Uh oh!

coderabbitai Bot commented Oct 16, 2025 •

edited

Loading

Uh oh!

pkg-pr-new Bot commented Oct 16, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

1 participant

Uh oh!

Conversation

wingkwong commented Oct 16, 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

Release Notes

Uh oh!

linear Bot commented Oct 16, 2025

Uh oh!

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

Uh oh!

🦋 Changeset detected

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Pre-merge checks and finishing touches

Uh oh!

pkg-pr-new Bot commented Oct 16, 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!

1 participant

wingkwong commented Oct 16, 2025 •

edited by coderabbitai Bot

Loading

changeset-bot Bot commented Oct 16, 2025 •

edited

Loading

vercel Bot commented Oct 16, 2025 •

edited

Loading

coderabbitai Bot commented Oct 16, 2025 •

edited

Loading

pkg-pr-new Bot commented Oct 16, 2025 •

edited

Loading