Skip to content

feat(ui): Dev mode banner updates#8917

Draft
alexcarpenter wants to merge 14 commits into
mainfrom
carp/dev-mode-update
Draft

feat(ui): Dev mode banner updates#8917
alexcarpenter wants to merge 14 commits into
mainfrom
carp/dev-mode-update

Conversation

@alexcarpenter

Copy link
Copy Markdown
Member

Description

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:

@changeset-bot

changeset-bot Bot commented Jun 18, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: f13daf4

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

vercel Bot commented Jun 18, 2026

Copy link
Copy Markdown

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

Project Deployment Actions Updated (UTC)
clerk-js-sandbox Ready Ready Preview, Comment Jun 23, 2026 12:36am
swingset Ready Ready Preview, Comment Jun 23, 2026 12:36am

Request Review

@coderabbitai

coderabbitai Bot commented Jun 18, 2026

Copy link
Copy Markdown
Contributor

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

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

Review profile: CHILL

Plan: Pro

Run ID: 698bfce7-041d-4569-bfd9-be0eb873394c

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review

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.

@pkg-pr-new

pkg-pr-new Bot commented Jun 18, 2026

Copy link
Copy Markdown

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: f13daf4

prestonwebdev and others added 3 commits June 22, 2026 10:02
Replaces the dev mode banner with a faded pixel-grid overlay behind a
center-peaked accent line. Adds an oval mask (configurable curve, fade
strength, and center softness), matches the "Development mode" text to
the "Secured by" text, and adjusts footer spacing. Also fixes a type
error from the removed DevModeOverlay `gradient` prop.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
The text Col already paints above the absolutely-positioned dev mode
overlay via DOM order with position: relative, so the explicit zIndex
and isolation are unnecessary.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Drops the isolation, content wrapper, and z-index lift from the test
card panels. The dots render over the content like the prior striped
pattern did; only position: relative (to anchor the overlay) and
overflow: hidden (to clip the grid) remain.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants