feat(ui): Improve scrollbar styling/consistency

[alexcarpenter]

Description

• The abrupt radius always felt goofy
• Ensures consistency across browsers

BEFORE	AFTER

Checklist

• pnpm test runs as expected.
• pnpm build runs as expected.
• (If applicable) JSDoc comments have been added or updated for any package exports
• (If applicable) Documentation has been updated

Type of change

• 🐛 Bug fix
• 🌟 New feature
• 🔨 Breaking change
• 📖 Refactoring / dependency upgrade / documentation
• other:

Summary by CodeRabbit

• Bug Fixes
  • Enhanced custom scrollbar styling with improved hover states and smooth transitions
  • Improved scrollbar appearance and consistency across all major browsers for a seamless experience

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

[changeset-bot]

🦋 Changeset detected

Latest commit: a4b903c

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

This PR includes changesets to release 2 packages

Name	Type
@clerk/ui	Patch
@clerk/chrome-extension	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	Actions	Updated (UTC)
clerk-js-sandbox	Ready	Preview, Comment	Jan 30, 2026 9:00pm

[coderabbitai]

📝 Walkthrough

Walkthrough

The unstyledScrollbar function in the styled-system common utilities was refactored to return a composed style object combining WebKit-based scrollbar rules and a Firefox-specific fallback wrapped in an @supports rule. The change adds hover state, border-radius, and transition for the scrollbar thumb, expands track styling, and uses scrollbarColor and scrollbarWidth for Firefox. The function signature and exported interface remain unchanged.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat(ui): Improve scrollbar styling/consistency' directly aligns with the main change: reworking unstyledScrollbar to improve cross-browser styling and consistency, including enhanced hover states, border radius, and transitions.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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

[pkg-pr-new]

Open in StackBlitz

@clerk/agent-toolkit

npm i https://pkg.pr.new/@clerk/agent-toolkit@7719

@clerk/astro

npm i https://pkg.pr.new/@clerk/astro@7719

@clerk/backend

npm i https://pkg.pr.new/@clerk/backend@7719

@clerk/chrome-extension

npm i https://pkg.pr.new/@clerk/chrome-extension@7719

@clerk/clerk-js

npm i https://pkg.pr.new/@clerk/clerk-js@7719

@clerk/dev-cli

npm i https://pkg.pr.new/@clerk/dev-cli@7719

@clerk/expo

npm i https://pkg.pr.new/@clerk/expo@7719

@clerk/expo-passkeys

npm i https://pkg.pr.new/@clerk/expo-passkeys@7719

@clerk/express

npm i https://pkg.pr.new/@clerk/express@7719

@clerk/fastify

npm i https://pkg.pr.new/@clerk/fastify@7719

@clerk/localizations

npm i https://pkg.pr.new/@clerk/localizations@7719

@clerk/nextjs

npm i https://pkg.pr.new/@clerk/nextjs@7719

@clerk/nuxt

npm i https://pkg.pr.new/@clerk/nuxt@7719

@clerk/react

npm i https://pkg.pr.new/@clerk/react@7719

@clerk/react-router

npm i https://pkg.pr.new/@clerk/react-router@7719

@clerk/shared

npm i https://pkg.pr.new/@clerk/shared@7719

@clerk/tanstack-react-start

npm i https://pkg.pr.new/@clerk/tanstack-react-start@7719

@clerk/testing

npm i https://pkg.pr.new/@clerk/testing@7719

@clerk/ui

npm i https://pkg.pr.new/@clerk/ui@7719

@clerk/upgrade

npm i https://pkg.pr.new/@clerk/upgrade@7719

@clerk/vue

npm i https://pkg.pr.new/@clerk/vue@7719

commit: a4b903c