feat(ui): Dev mode banner updates

[alexcarpenter]

Description

Updates dev mode banner implementation.

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

  • Updated development mode indicator styling for improved visual presentation across checkout, payment method, and card components.

• Style

  • Refined development mode overlay rendering with updated SVG-based grid display.
  • Adjusted development mode notice spacing and alignment for better visual consistency.

• Tests

  • Added test coverage for development mode indicator styling and visibility.

[changeset-bot]

🦋 Changeset detected

Latest commit: c59af36

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

This PR includes changesets to release 3 packages

Name	Type
@clerk/ui	Patch
@clerk/chrome-extension	Patch
@clerk/swingset	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	Jun 23, 2026 1:18pm
swingset	Ready	Preview, Comment	Jun 23, 2026 1:18pm

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository YAML (base), Repository UI (inherited)

Review profile: CHILL

Plan: Pro

Run ID: 2ebcdcb2-30d4-4eb1-9380-5f22c441343d

📥 Commits

Reviewing files that changed from the base of the PR and between a536a0d and c59af36.

📒 Files selected for processing (9)

• .changeset/clear-adults-pump.md
• packages/ui/src/components/Checkout/CheckoutForm.tsx
• packages/ui/src/components/PaymentMethods/TestPaymentMethod.tsx
• packages/ui/src/elements/Card/CardClerkAndPagesTag.tsx
• packages/ui/src/elements/Card/CardFooter.tsx
• packages/ui/src/elements/Card/CardRoot.tsx
• packages/ui/src/elements/Card/__tests__/CardRoot.test.tsx
• packages/ui/src/elements/DevModeNotice.tsx
• packages/ui/src/elements/Navbar.tsx

---

📝 Walkthrough

Walkthrough

Refactors DevModeOverlay from a repeating-linear-gradient approach to an SVG grid mask with DEV_MODE_GRID constants, removes its gradient prop, and updates all consumers (CheckoutForm, TestPaymentMethod, CardClerkAndPagesTag). Adds flush-mode CSS overrides in CardRoot to hide the overlay and center the notice, adjusts spacing in CardFooter and Navbar, and extends CardRoot tests for raised vs. flush dev-mode indicator behavior.

Changes

Dev Mode Indicator Styling

Layer / File(s)	Summary
DevModeOverlay core rewrite (SVG grid mask) packages/ui/src/elements/DevModeNotice.tsx	Replaces the repeating-gradient maskImage implementation with a DEV_MODE_GRID-driven SVG tile generator that produces two masked Box layers. Removes the gradient prop entirely. Adds data-clerk-dev-mode-overlay to the wrapper and data-clerk-dev-mode-notice to DevModeNotice, and removes the fontWeight default from DevModeNotice.
Payment component adoption packages/ui/src/components/Checkout/CheckoutForm.tsx, packages/ui/src/components/PaymentMethods/TestPaymentMethod.tsx	Both components import DevModeOverlay, replace their inline gradient overlay blocks with <DevModeOverlay />, and add overflow: 'hidden' to their containers.
Card layout, spacing, and flush-mode suppression packages/ui/src/elements/Card/CardClerkAndPagesTag.tsx, packages/ui/src/elements/Card/CardFooter.tsx, packages/ui/src/elements/Card/CardRoot.tsx, packages/ui/src/elements/Navbar.tsx	CardClerkAndPagesTag removes isolation: 'isolate' and the gradient={0} prop, and increases the Col gap token to $4. CardFooter adds a negative marginBottom calc for the notice. CardRoot.getFlushElements hides [data-clerk-dev-mode-overlay] and centers [data-clerk-dev-mode-notice] with adjusted margin/padding. Navbar passes devModeNoticeSx with matching padding and bottom margin to Card.ClerkAndPagesTag.
CardRoot tests and changeset packages/ui/src/elements/Card/__tests__/CardRoot.test.tsx, .changeset/clear-adults-pump.md	Adds ClerkInstanceContext, EnvironmentProvider, and CardFooter imports, a devEnvironment stub, and a renderCardWithFooter helper. Extends flush tests to assert overlay hidden and notice alignment. Adds a new describe block covering raised (overlay + notice visible) vs flush (notice visible, overlay hidden) behavior. Changeset records a patch bump for @clerk/ui.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Suggested reviewers

• kylemac

Poem

🐰 Hop hop, the gradient's gone today,
SVG grids have come to play!
A mask of tiles, a notice pinned below,
In flush or raised, the dev badge glows.
No more gradient={0} in sight —
The bunny refactored overnight! ✨

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat(ui): Dev mode banner updates' directly describes the main change in the changeset: refactoring the dev mode banner/overlay implementation across multiple UI components with new styling and grid overlay design.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

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

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

---

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.}

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/electron

npm i https://pkg.pr.new/@clerk/electron@8917

@clerk/electron-passkeys

npm i https://pkg.pr.new/@clerk/electron-passkeys@8917

@clerk/eslint-plugin

npm i https://pkg.pr.new/@clerk/eslint-plugin@8917

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

npm i https://pkg.pr.new/@clerk/hono@8917

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: c59af36

[github-actions]

API Changes Report

Generated by Break Check on 2026-06-23T13:20:12.964Z

Summary

Metric	Count
Packages analyzed	19
Packages with changes	0
🔴 Breaking changes	0
🟡 Non-breaking changes	0
🟢 Additions	0

No API Changes Detected

All packages have stable APIs with no detected changes.

---

Report generated by Break Check

_{Last ran on c59af36.}