fix(astro): Preserve Clerk component stylings across view transitions

[wobsoriano]

Description

Notice the UserButton component when navigating:

Screen.Recording.2026-05-26.at.8.07.16.PM.mov

Fixed demo

Screen.Recording.2026-05-26.at.8.07.51.PM.mov

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 detected

Latest commit: ceffc1e

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

This PR includes changesets to release 1 package

Name	Type
@clerk/astro	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	May 27, 2026 2:49am

[pkg-pr-new]

Open in StackBlitz

@clerk/astro

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

@clerk/backend

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

@clerk/chrome-extension

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

@clerk/clerk-js

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

@clerk/dev-cli

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

@clerk/expo

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

@clerk/expo-passkeys

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

@clerk/express

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

@clerk/fastify

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

@clerk/hono

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

@clerk/localizations

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

@clerk/nextjs

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

@clerk/nuxt

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

@clerk/react

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

@clerk/react-router

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

@clerk/shared

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

@clerk/tanstack-react-start

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

@clerk/testing

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

@clerk/ui

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

@clerk/upgrade

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

@clerk/vue

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

commit: ceffc1e

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR fixes Clerk component styling breaking during Astro View Transitions navigations. The core issue was that the #clerk-components element was being cloned instead of moved during astro:before-swap, leaving the React root attached to a detached element. The fix consolidates redundant dynamic imports of the transitions module into a single shared Promise and moves (instead of clones) the element into the next document. Test pages and a regression test verify the styling remains intact after round-trip navigation.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.
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.
Description check	✅ Passed	The PR description provides context about the issue (UserButton component styling lost during navigation) with video comparisons before and after the fix, directly related to the changeset.
Title check	✅ Passed	The title clearly and specifically describes the main change: fixing Clerk component styling preservation during Astro view transitions.

_{✏️ 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.}