From 67b4d0a4df08795efc0ddab401fd931cb1770366 Mon Sep 17 00:00:00 2001
From: wobsoriano <sorianorobertc@gmail.com>
Date: Wed, 9 Jul 2025 16:23:46 -0700
Subject: [PATCH 1/2] chore(repo): Add prettier plugin for .astro files

---
 .prettierrc                                   |   2 +-
 .../astro-hybrid/src/layouts/Layout.astro     |  25 +++-
 .../astro-hybrid/src/pages/index.astro        |  29 +++--
 .../astro-hybrid/src/pages/only-admins.astro  |  14 +--
 .../astro-hybrid/src/pages/only-members.astro |  17 +--
 .../astro-hybrid/src/pages/ssr.astro          |  29 +++--
 .../astro-node/src/components/Card.astro      | 102 ++++++++--------
 .../src/components/CustomUserButton.astro     |  54 +++++----
 .../src/components/StreamUser.astro           |   8 +-
 .../astro-node/src/layouts/Layout.astro       |  87 ++++++++------
 .../astro-node/src/layouts/Streaming.astro    |   2 +-
 .../src/layouts/ViewTransitionsLayout.astro   |  25 +++-
 .../astro-node/src/layouts/react/Layout.astro |  90 ++++++++------
 .../astro-node/src/pages/buttons.astro        |  16 ++-
 .../custom-pages/organization-profile.astro   |  75 +++++++-----
 .../src/pages/custom-pages/user-profile.astro |  38 +++---
 .../astro-node/src/pages/discover.astro       |  14 +--
 .../astro-node/src/pages/index.astro          |  70 +++++------
 .../astro-node/src/pages/only-admins.astro    |  21 ++--
 .../astro-node/src/pages/only-members.astro   |  21 ++--
 .../astro-node/src/pages/organization.astro   |  21 ++--
 .../astro-node/src/pages/react/index.astro    |  75 ++++++------
 .../src/pages/react/only-admins.astro         |  24 ++--
 .../src/pages/react/only-members.astro        |  24 ++--
 .../astro-node/src/pages/react/sign-in.astro  |   8 +-
 .../astro-node/src/pages/react/user.astro     |  10 +-
 .../astro-node/src/pages/server-islands.astro |  26 ++--
 .../astro-node/src/pages/sign-in.astro        |   8 +-
 .../src/pages/transitions/index.astro         |  12 +-
 .../src/pages/transitions/sign-in.astro       |  10 +-
 .../templates/astro-node/src/pages/user.astro |  10 +-
 .../astro-node/src/pages/utility.astro        |  16 +--
 package.json                                  |   1 +
 .../AuthenticateWithRedirectCallback.astro    |   2 +-
 .../astro-components/control/Protect.astro    |  24 ++--
 .../astro-components/control/ProtectCSR.astro |  72 +++++++-----
 .../astro-components/control/ProtectSSR.astro |  12 +-
 .../astro-components/control/SignedIn.astro   |   8 +-
 .../control/SignedInCSR.astro                 |  29 +++--
 .../control/SignedInSSR.astro                 |   4 +-
 .../astro-components/control/SignedOut.astro  |   8 +-
 .../control/SignedOutCSR.astro                |  29 +++--
 .../control/SignedOutSSR.astro                |   4 +-
 .../interactive/CreateOrganization.astro      |  11 +-
 .../CustomProfilePageRenderer.astro           |  98 ++++++++--------
 .../interactive/GoogleOneTap.astro            |  11 +-
 .../InternalUIComponentRenderer.astro         |   2 +-
 .../interactive/OrganizationList.astro        |  11 +-
 .../OrganizationProfile.astro                 |  11 +-
 .../OrganizationProfileLink.astro             |  20 +++-
 .../OrganizationProfilePage.astro             |  30 +++--
 .../interactive/OrganizationSwitcher.astro    |  11 +-
 .../OrganizationProfileLink.astro             |  20 +++-
 .../OrganizationProfilePage.astro             |  30 +++--
 .../OrganizationSwitcher.astro                |  13 +-
 .../interactive/PricingTable.astro            |  11 +-
 .../astro-components/interactive/SignIn.astro |  11 +-
 .../astro-components/interactive/SignUp.astro |  11 +-
 .../UserButton/MenuItemRenderer.astro         | 111 +++++++++---------
 .../interactive/UserButton/UserButton.astro   |  11 +-
 .../UserButton/UserButtonAction.astro         |  28 +++--
 .../UserButton/UserButtonLink.astro           |  19 ++-
 .../UserButton/UserButtonMenuItems.astro      |  22 ++--
 .../UserButtonUserProfilePage.astro           |  79 +++++++------
 .../interactive/UserProfile/UserProfile.astro |  11 +-
 .../UserProfile/UserProfileLink.astro         |  20 +++-
 .../UserProfile/UserProfilePage.astro         |  30 +++--
 .../interactive/Waitlist.astro                |  11 +-
 .../unstyled/SignInButton.astro               |  27 +++--
 .../unstyled/SignOutButton.astro              |  37 +++---
 .../unstyled/SignUpButton.astro               |  31 ++---
 pnpm-lock.yaml                                |  38 +++++-
 72 files changed, 1105 insertions(+), 847 deletions(-)

diff --git a/.prettierrc b/.prettierrc
index bcb1ab38eda..b49961d93e7 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -2,7 +2,7 @@
   "arrowParens": "avoid",
   "bracketSpacing": true,
   "jsxSingleQuote": true,
-  "plugins": ["prettier-plugin-packagejson", "prettier-plugin-tailwindcss"],
+  "plugins": ["prettier-plugin-packagejson", "prettier-plugin-tailwindcss", "prettier-plugin-astro"],
   "printWidth": 120,
   "semi": true,
   "singleAttributePerLine": true,
diff --git a/integration/templates/astro-hybrid/src/layouts/Layout.astro b/integration/templates/astro-hybrid/src/layouts/Layout.astro
index b5c6c9717ba..e1fad35cd47 100644
--- a/integration/templates/astro-hybrid/src/layouts/Layout.astro
+++ b/integration/templates/astro-hybrid/src/layouts/Layout.astro
@@ -7,13 +7,26 @@ const { title } = Astro.props;
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang='en'>
   <head>
-    <meta charset="UTF-8" />
-    <meta name="description" content="Astro description" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="generator" content={Astro.generator} />
+    <meta charset='UTF-8' />
+    <meta
+      name='description'
+      content='Astro description'
+    />
+    <meta
+      name='viewport'
+      content='width=device-width, initial-scale=1.0'
+    />
+    <link
+      rel='icon'
+      type='image/svg+xml'
+      href='/favicon.svg'
+    />
+    <meta
+      name='generator'
+      content={Astro.generator}
+    />
     <title>{title}</title>
   </head>
   <body>
diff --git a/integration/templates/astro-hybrid/src/pages/index.astro b/integration/templates/astro-hybrid/src/pages/index.astro
index b13e67a0a46..47168af011b 100644
--- a/integration/templates/astro-hybrid/src/pages/index.astro
+++ b/integration/templates/astro-hybrid/src/pages/index.astro
@@ -1,19 +1,22 @@
 ---
-import { UserButton, SignInButton, SignedIn, SignedOut } from "@clerk/astro/components";
-import { OrganizationSwitcher } from "@clerk/astro/react";
-import Layout from "../layouts/Layout.astro";
+import { UserButton, SignInButton, SignedIn, SignedOut } from '@clerk/astro/components';
+import { OrganizationSwitcher } from '@clerk/astro/react';
+import Layout from '../layouts/Layout.astro';
 
 export const prerender = true;
 ---
 
-<Layout title="Home">
-    <SignedOut>
-        <h1>Signed out</h1>
-        <SignInButton mode="modal" fallbackRedirectUrl="/" />
-    </SignedOut>
-    <SignedIn>
-        <h1>Signed in</h1>
-        <UserButton />
-        <OrganizationSwitcher client:only="react" />
-    </SignedIn>
+<Layout title='Home'>
+  <SignedOut>
+    <h1>Signed out</h1>
+    <SignInButton
+      mode='modal'
+      fallbackRedirectUrl='/'
+    />
+  </SignedOut>
+  <SignedIn>
+    <h1>Signed in</h1>
+    <UserButton />
+    <OrganizationSwitcher client:only='react' />
+  </SignedIn>
 </Layout>
diff --git a/integration/templates/astro-hybrid/src/pages/only-admins.astro b/integration/templates/astro-hybrid/src/pages/only-admins.astro
index 842b10ac81f..9a786b993a0 100644
--- a/integration/templates/astro-hybrid/src/pages/only-admins.astro
+++ b/integration/templates/astro-hybrid/src/pages/only-admins.astro
@@ -1,13 +1,13 @@
 ---
-import { Protect } from "@clerk/astro/components";
-import Layout from "../layouts/Layout.astro";
+import { Protect } from '@clerk/astro/components';
+import Layout from '../layouts/Layout.astro';
 
 export const prerender = true;
 ---
 
-<Layout title="Protected">
-    <Protect role="org:admin">
-        <h1>I'm an admin</h1>
-        <h1 slot="fallback">Not an admin</h1>
-    </Protect>
+<Layout title='Protected'>
+  <Protect role='org:admin'>
+    <h1>I'm an admin</h1>
+    <h1 slot='fallback'>Not an admin</h1>
+  </Protect>
 </Layout>
diff --git a/integration/templates/astro-hybrid/src/pages/only-members.astro b/integration/templates/astro-hybrid/src/pages/only-members.astro
index 70eac5ff274..cf6f6b05e48 100644
--- a/integration/templates/astro-hybrid/src/pages/only-members.astro
+++ b/integration/templates/astro-hybrid/src/pages/only-members.astro
@@ -1,13 +1,16 @@
 ---
-import { Protect } from "@clerk/astro/components";
-import Layout from "../layouts/Layout.astro";
+import { Protect } from '@clerk/astro/components';
+import Layout from '../layouts/Layout.astro';
 
 export const prerender = false;
 ---
 
-<Layout title="Protected">
-    <Protect role="basic_member" isStatic={false}>
-        <h1>I'm a member</h1>
-        <h1 slot="fallback">Not a member</h1>
-    </Protect>
+<Layout title='Protected'>
+  <Protect
+    role='basic_member'
+    isStatic={false}
+  >
+    <h1>I'm a member</h1>
+    <h1 slot='fallback'>Not a member</h1>
+  </Protect>
 </Layout>
diff --git a/integration/templates/astro-hybrid/src/pages/ssr.astro b/integration/templates/astro-hybrid/src/pages/ssr.astro
index b0ad0b253ef..0db930a6145 100644
--- a/integration/templates/astro-hybrid/src/pages/ssr.astro
+++ b/integration/templates/astro-hybrid/src/pages/ssr.astro
@@ -1,19 +1,22 @@
 ---
-import { UserButton, SignInButton, SignedIn, SignedOut } from "@clerk/astro/components";
-import { OrganizationSwitcher } from "@clerk/astro/react";
-import Layout from "../layouts/Layout.astro";
+import { UserButton, SignInButton, SignedIn, SignedOut } from '@clerk/astro/components';
+import { OrganizationSwitcher } from '@clerk/astro/react';
+import Layout from '../layouts/Layout.astro';
 
 export const prerender = false;
 ---
 
-<Layout title="Home">
-    <SignedOut isStatic={false}>
-        <h1>Signed out</h1>
-        <SignInButton mode="modal" fallbackRedirectUrl="/" />
-    </SignedOut>
-    <SignedIn isStatic={false}>
-        <h1>Signed in</h1>
-        <UserButton />
-        <OrganizationSwitcher client:load />
-    </SignedIn>
+<Layout title='Home'>
+  <SignedOut isStatic={false}>
+    <h1>Signed out</h1>
+    <SignInButton
+      mode='modal'
+      fallbackRedirectUrl='/'
+    />
+  </SignedOut>
+  <SignedIn isStatic={false}>
+    <h1>Signed in</h1>
+    <UserButton />
+    <OrganizationSwitcher client:load />
+  </SignedIn>
 </Layout>
diff --git a/integration/templates/astro-node/src/components/Card.astro b/integration/templates/astro-node/src/components/Card.astro
index bd6d5971ebf..f223ba2f509 100644
--- a/integration/templates/astro-node/src/components/Card.astro
+++ b/integration/templates/astro-node/src/components/Card.astro
@@ -1,61 +1,61 @@
 ---
 interface Props {
-	title: string;
-	body: string;
-	href: string;
+  title: string;
+  body: string;
+  href: string;
 }
 
 const { href, title, body } = Astro.props;
 ---
 
-<li class="link-card">
-	<a href={href}>
-		<h2>
-			{title}
-			<span>&rarr;</span>
-		</h2>
-		<p>
-			{body}
-		</p>
-	</a>
+<li class='link-card'>
+  <a href={href}>
+    <h2>
+      {title}
+      <span>&rarr;</span>
+    </h2>
+    <p>
+      {body}
+    </p>
+  </a>
 </li>
 <style>
-	.link-card {
-		list-style: none;
-		display: flex;
-		padding: 1px;
-		background-color: #23262d;
-		background-image: none;
-		background-size: 400%;
-		border-radius: 7px;
-		background-position: 100%;
-		transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-		box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
-	}
-	.link-card > a {
-		width: 100%;
-		text-decoration: none;
-		line-height: 1.4;
-		padding: calc(1.5rem - 1px);
-		border-radius: 8px;
-		color: white;
-		background-color: #23262d;
-		opacity: 0.8;
-	}
-	h2 {
-		margin: 0;
-		font-size: 1.25rem;
-		transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
-	}
-	p {
-		margin-top: 0.5rem;
-		margin-bottom: 0;
-	}
-	.link-card:is(:hover, :focus-within) {
-		background-position: 0;
-		background-image: var(--accent-gradient);
-	}
-	.link-card:is(:hover, :focus-within) h2 {
-		color: rgb(var(--accent-light));
-	}
+  .link-card {
+    list-style: none;
+    display: flex;
+    padding: 1px;
+    background-color: #23262d;
+    background-image: none;
+    background-size: 400%;
+    border-radius: 7px;
+    background-position: 100%;
+    transition: background-position 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+  }
+  .link-card > a {
+    width: 100%;
+    text-decoration: none;
+    line-height: 1.4;
+    padding: calc(1.5rem - 1px);
+    border-radius: 8px;
+    color: white;
+    background-color: #23262d;
+    opacity: 0.8;
+  }
+  h2 {
+    margin: 0;
+    font-size: 1.25rem;
+    transition: color 0.6s cubic-bezier(0.22, 1, 0.36, 1);
+  }
+  p {
+    margin-top: 0.5rem;
+    margin-bottom: 0;
+  }
+  .link-card:is(:hover, :focus-within) {
+    background-position: 0;
+    background-image: var(--accent-gradient);
+  }
+  .link-card:is(:hover, :focus-within) h2 {
+    color: rgb(var(--accent-light));
+  }
 </style>
diff --git a/integration/templates/astro-node/src/components/CustomUserButton.astro b/integration/templates/astro-node/src/components/CustomUserButton.astro
index e2d26f48a98..7586c0db5ba 100644
--- a/integration/templates/astro-node/src/components/CustomUserButton.astro
+++ b/integration/templates/astro-node/src/components/CustomUserButton.astro
@@ -2,25 +2,37 @@
 import { UserButton } from '@clerk/astro/components';
 ---
 
-<UserButton afterSignOutUrl="/">
-    <UserButton.MenuItems>
-        <UserButton.Action label="signOut" />
-        <UserButton.Action label="manageAccount" />
-        <UserButton.Link label="Custom link" href="/user">
-            <div slot="label-icon">Icon</div>
-        </UserButton.Link>
-        <UserButton.Action label="Custom action" open="terms">
-            <div slot="label-icon">Icon</div>
-        </UserButton.Action>
-        <UserButton.Action label="Custom click" clickIdentifier="custom_click">
-            <div slot="label-icon">Icon</div>
-        </UserButton.Action>
-    </UserButton.MenuItems>
-    <UserButton.UserProfilePage label="Terms" url="terms">
-        <div slot="label-icon">Icon</div>
-        <div>
-            <h1>Custom Terms Page</h1>
-            <p>This is the custom terms page</p>
-        </div>
-    </UserButton.UserProfilePage>
+<UserButton afterSignOutUrl='/'>
+  <UserButton.MenuItems>
+    <UserButton.Action label='signOut' />
+    <UserButton.Action label='manageAccount' />
+    <UserButton.Link
+      label='Custom link'
+      href='/user'
+    >
+      <div slot='label-icon'>Icon</div>
+    </UserButton.Link>
+    <UserButton.Action
+      label='Custom action'
+      open='terms'
+    >
+      <div slot='label-icon'>Icon</div>
+    </UserButton.Action>
+    <UserButton.Action
+      label='Custom click'
+      clickIdentifier='custom_click'
+    >
+      <div slot='label-icon'>Icon</div>
+    </UserButton.Action>
+  </UserButton.MenuItems>
+  <UserButton.UserProfilePage
+    label='Terms'
+    url='terms'
+  >
+    <div slot='label-icon'>Icon</div>
+    <div>
+      <h1>Custom Terms Page</h1>
+      <p>This is the custom terms page</p>
+    </div>
+  </UserButton.UserProfilePage>
 </UserButton>
diff --git a/integration/templates/astro-node/src/components/StreamUser.astro b/integration/templates/astro-node/src/components/StreamUser.astro
index 4e3f562b651..deb5e7bacdc 100644
--- a/integration/templates/astro-node/src/components/StreamUser.astro
+++ b/integration/templates/astro-node/src/components/StreamUser.astro
@@ -1,6 +1,10 @@
 ---
-import { Code } from "astro:components";
+import { Code } from 'astro:components';
 const user = await Astro.locals.currentUser();
 ---
 
-<Code code={JSON.stringify(user)} lang={"json"} wrap />
\ No newline at end of file
+<Code
+  code={JSON.stringify(user)}
+  lang={'json'}
+  wrap
+/>
diff --git a/integration/templates/astro-node/src/layouts/Layout.astro b/integration/templates/astro-node/src/layouts/Layout.astro
index 8abf4093714..3e168321da2 100644
--- a/integration/templates/astro-node/src/layouts/Layout.astro
+++ b/integration/templates/astro-node/src/layouts/Layout.astro
@@ -5,54 +5,70 @@ interface Props {
 
 const { title } = Astro.props;
 
-import { SignedIn, SignedOut } from "@clerk/astro/components";
-import { LanguagePicker } from "../components/LanguagePicker";
-import CustomUserButton from "../components/CustomUserButton.astro";
+import { SignedIn, SignedOut } from '@clerk/astro/components';
+import { LanguagePicker } from '../components/LanguagePicker';
+import CustomUserButton from '../components/CustomUserButton.astro';
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang='en'>
   <head>
-    <meta charset="UTF-8" />
-    <meta name="description" content="Astro description" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="generator" content={Astro.generator} />
+    <meta charset='UTF-8' />
+    <meta
+      name='description'
+      content='Astro description'
+    />
+    <meta
+      name='viewport'
+      content='width=device-width, initial-scale=1.0'
+    />
+    <link
+      rel='icon'
+      type='image/svg+xml'
+      href='/favicon.svg'
+    />
+    <meta
+      name='generator'
+      content={Astro.generator}
+    />
     <title>{title}</title>
   </head>
   <body>
-    <header class="bg-black/40 backdrop-blur-md border-b border-b-zinc-800">
-      <div class="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8">
-        <div class="flex h-16 items-center justify-between">
-          <div class="md:flex md:items-center md:gap-12">
-            <a class="block text-teal-600" href="/">
+    <header class='bg-black/40 backdrop-blur-md border-b border-b-zinc-800'>
+      <div class='mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8'>
+        <div class='flex h-16 items-center justify-between'>
+          <div class='md:flex md:items-center md:gap-12'>
+            <a
+              class='block text-teal-600'
+              href='/'
+            >
               <span>Home</span>
             </a>
           </div>
 
-          <div class="hidden md:block">
-            <nav aria-label="Global">
-              <ul class="flex items-center gap-6 text-sm">
+          <div class='hidden md:block'>
+            <nav aria-label='Global'>
+              <ul class='flex items-center gap-6 text-sm'>
                 <li>
                   <a
-                    class="text-gray-100 transition hover:text-gray-400"
-                    href="/user"
+                    class='text-gray-100 transition hover:text-gray-400'
+                    href='/user'
                   >
                     User
                   </a>
                 </li>
                 <li>
                   <a
-                    class="text-gray-100 transition hover:text-gray-400"
-                    href="/organization"
+                    class='text-gray-100 transition hover:text-gray-400'
+                    href='/organization'
                   >
                     Organization
                   </a>
                 </li>
                 <li>
                   <a
-                    class="text-gray-100 transition hover:text-gray-400"
-                    href="/discover"
+                    class='text-gray-100 transition hover:text-gray-400'
+                    href='/discover'
                   >
                     Discover
                   </a>
@@ -61,7 +77,7 @@ import CustomUserButton from "../components/CustomUserButton.astro";
             </nav>
           </div>
 
-          <div class="flex gap-5 items-center">
+          <div class='flex gap-5 items-center'>
             <LanguagePicker client:idle />
 
             <SignedIn>
@@ -69,25 +85,25 @@ import CustomUserButton from "../components/CustomUserButton.astro";
             </SignedIn>
 
             <SignedOut>
-              <div class="sm:flex sm:gap-4">
+              <div class='sm:flex sm:gap-4'>
                 <a
-                  class="inline-flex group relative isolate w-fit transform-gpu overflow-hidden rounded-md px-3 py-[0.1875rem] cursor-pointer after:absolute after:inset-0 after:hover:opacity-100 transition duration-300 ease-[cubic-bezier(.4,.36,0,1)] after:duration-300 after:ease-[cubic-bezier(.4,.36,0,1)] after:transtion-opacity shadow-[inset_0px_1px_0px_theme(colors.white/12%),inset_0px_-1px_0px_theme(colors.white/4%),0px_2px_2px_-1px_rgb(66,67,77,0.24),0px_4px_4px_-2px_rgb(66,67,77,0.12)] bg-[#3C169C] ring-1 ring-[#230B6A] after:bg-[linear-gradient(theme(colors.white/24%),theme(colors.white/16%)_46%,theme(colors.white/12%)_54%,theme(colors.white/8%))] after:opacity-60 [--text-color:#FFFFFF]"
-                  href="/sign-in"
+                  class='inline-flex group relative isolate w-fit transform-gpu overflow-hidden rounded-md px-3 py-[0.1875rem] cursor-pointer after:absolute after:inset-0 after:hover:opacity-100 transition duration-300 ease-[cubic-bezier(.4,.36,0,1)] after:duration-300 after:ease-[cubic-bezier(.4,.36,0,1)] after:transtion-opacity shadow-[inset_0px_1px_0px_theme(colors.white/12%),inset_0px_-1px_0px_theme(colors.white/4%),0px_2px_2px_-1px_rgb(66,67,77,0.24),0px_4px_4px_-2px_rgb(66,67,77,0.12)] bg-[#3C169C] ring-1 ring-[#230B6A] after:bg-[linear-gradient(theme(colors.white/24%),theme(colors.white/16%)_46%,theme(colors.white/12%)_54%,theme(colors.white/8%))] after:opacity-60 [--text-color:#FFFFFF]'
+                  href='/sign-in'
                 >
                   <span
-                    class="text-[0.8125rem] font-medium leading-6 text-[--text-color] drop-shadow-[--text-drop-shadow]"
+                    class='text-[0.8125rem] font-medium leading-6 text-[--text-color] drop-shadow-[--text-drop-shadow]'
                   >
                     Login
                   </span>
                 </a>
 
-                <div class="hidden sm:flex">
+                <div class='hidden sm:flex'>
                   <a
-                    class="inline-flex group relative isolate w-fit transform-gpu overflow-hidden rounded-md px-3 py-[0.1875rem] cursor-pointer after:absolute after:inset-0 after:hover:opacity-100 transition duration-300 ease-[cubic-bezier(.4,.36,0,1)] after:duration-300 after:ease-[cubic-bezier(.4,.36,0,1)] after:transtion-opacity shadow-[inset_0px_1px_0px_theme(colors.white/12%),inset_0px_-1px_0px_theme(colors.white/4%),0px_2px_2px_-1px_rgb(66,67,77,0.24),0px_4px_4px_-2px_rgb(66,67,77,0.12)] bg-newGray-900 ring-1 ring-newGray-950 after:bg-[linear-gradient(theme(colors.white/24%),theme(colors.white/16%)_46%,theme(colors.white/12%)_54%,theme(colors.white/8%))] after:opacity-60 [--text-color:#FFFFFF]"
-                    href="/sign-up"
+                    class='inline-flex group relative isolate w-fit transform-gpu overflow-hidden rounded-md px-3 py-[0.1875rem] cursor-pointer after:absolute after:inset-0 after:hover:opacity-100 transition duration-300 ease-[cubic-bezier(.4,.36,0,1)] after:duration-300 after:ease-[cubic-bezier(.4,.36,0,1)] after:transtion-opacity shadow-[inset_0px_1px_0px_theme(colors.white/12%),inset_0px_-1px_0px_theme(colors.white/4%),0px_2px_2px_-1px_rgb(66,67,77,0.24),0px_4px_4px_-2px_rgb(66,67,77,0.12)] bg-newGray-900 ring-1 ring-newGray-950 after:bg-[linear-gradient(theme(colors.white/24%),theme(colors.white/16%)_46%,theme(colors.white/12%)_54%,theme(colors.white/8%))] after:opacity-60 [--text-color:#FFFFFF]'
+                    href='/sign-up'
                   >
                     <span
-                      class="text-[0.8125rem] font-medium leading-6 text-[--text-color] drop-shadow-[--text-drop-shadow]"
+                      class='text-[0.8125rem] font-medium leading-6 text-[--text-color] drop-shadow-[--text-drop-shadow]'
                     >
                       Register
                     </span>
@@ -109,12 +125,7 @@ import CustomUserButton from "../components/CustomUserButton.astro";
     --accent: 136, 58, 234;
     --accent-light: 224, 204, 250;
     --accent-dark: 49, 10, 101;
-    --accent-gradient: linear-gradient(
-      45deg,
-      rgb(var(--accent)),
-      rgb(var(--accent-light)) 30%,
-      white 60%
-    );
+    --accent-gradient: linear-gradient(45deg, rgb(var(--accent)), rgb(var(--accent-light)) 30%, white 60%);
   }
   html {
     font-family: system-ui, sans-serif;
diff --git a/integration/templates/astro-node/src/layouts/Streaming.astro b/integration/templates/astro-node/src/layouts/Streaming.astro
index e19b870db3c..b63b439870b 100644
--- a/integration/templates/astro-node/src/layouts/Streaming.astro
+++ b/integration/templates/astro-node/src/layouts/Streaming.astro
@@ -1,5 +1,5 @@
 ---
-await new Promise((res) =>
+await new Promise(res =>
   setTimeout(() => {
     res(undefined);
   }, 4000),
diff --git a/integration/templates/astro-node/src/layouts/ViewTransitionsLayout.astro b/integration/templates/astro-node/src/layouts/ViewTransitionsLayout.astro
index cca2f683cf2..313759f6bf8 100644
--- a/integration/templates/astro-node/src/layouts/ViewTransitionsLayout.astro
+++ b/integration/templates/astro-node/src/layouts/ViewTransitionsLayout.astro
@@ -9,13 +9,26 @@ const { title } = Astro.props;
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang='en'>
   <head>
-    <meta charset="UTF-8" />
-    <meta name="description" content="Astro description" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="generator" content={Astro.generator} />
+    <meta charset='UTF-8' />
+    <meta
+      name='description'
+      content='Astro description'
+    />
+    <meta
+      name='viewport'
+      content='width=device-width, initial-scale=1.0'
+    />
+    <link
+      rel='icon'
+      type='image/svg+xml'
+      href='/favicon.svg'
+    />
+    <meta
+      name='generator'
+      content={Astro.generator}
+    />
     <title>{title}</title>
     <ClientRouter />
   </head>
diff --git a/integration/templates/astro-node/src/layouts/react/Layout.astro b/integration/templates/astro-node/src/layouts/react/Layout.astro
index 2f076c64d38..2bc68f059e2 100644
--- a/integration/templates/astro-node/src/layouts/react/Layout.astro
+++ b/integration/templates/astro-node/src/layouts/react/Layout.astro
@@ -5,53 +5,69 @@ interface Props {
 
 const { title } = Astro.props;
 
-import { SignedIn, SignedOut, UserButton } from "@clerk/astro/react";
-import { LanguagePicker } from "../../components/LanguagePicker";
+import { SignedIn, SignedOut, UserButton } from '@clerk/astro/react';
+import { LanguagePicker } from '../../components/LanguagePicker';
 ---
 
 <!doctype html>
-<html lang="en">
+<html lang='en'>
   <head>
-    <meta charset="UTF-8" />
-    <meta name="description" content="Astro description" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-    <meta name="generator" content={Astro.generator} />
+    <meta charset='UTF-8' />
+    <meta
+      name='description'
+      content='Astro description'
+    />
+    <meta
+      name='viewport'
+      content='width=device-width, initial-scale=1.0'
+    />
+    <link
+      rel='icon'
+      type='image/svg+xml'
+      href='/favicon.svg'
+    />
+    <meta
+      name='generator'
+      content={Astro.generator}
+    />
     <title>{title}</title>
   </head>
   <body>
-    <header class="bg-black/40 backdrop-blur-md border-b border-b-zinc-800">
-      <div class="mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8">
-        <div class="flex h-16 items-center justify-between">
-          <div class="md:flex md:items-center md:gap-12">
-            <a class="block text-teal-600" href="/">
+    <header class='bg-black/40 backdrop-blur-md border-b border-b-zinc-800'>
+      <div class='mx-auto max-w-screen-xl px-4 sm:px-6 lg:px-8'>
+        <div class='flex h-16 items-center justify-between'>
+          <div class='md:flex md:items-center md:gap-12'>
+            <a
+              class='block text-teal-600'
+              href='/'
+            >
               <span>Home</span>
             </a>
           </div>
 
-          <div class="hidden md:block">
-            <nav aria-label="Global">
-              <ul class="flex items-center gap-6 text-sm">
+          <div class='hidden md:block'>
+            <nav aria-label='Global'>
+              <ul class='flex items-center gap-6 text-sm'>
                 <li>
                   <a
-                    class="text-gray-100 transition hover:text-gray-400"
-                    href="/user"
+                    class='text-gray-100 transition hover:text-gray-400'
+                    href='/user'
                   >
                     User
                   </a>
                 </li>
                 <li>
                   <a
-                    class="text-gray-100 transition hover:text-gray-400"
-                    href="/organization"
+                    class='text-gray-100 transition hover:text-gray-400'
+                    href='/organization'
                   >
                     Organization
                   </a>
                 </li>
                 <li>
                   <a
-                    class="text-gray-100 transition hover:text-gray-400"
-                    href="/discover"
+                    class='text-gray-100 transition hover:text-gray-400'
+                    href='/discover'
                   >
                     Discover
                   </a>
@@ -60,33 +76,36 @@ import { LanguagePicker } from "../../components/LanguagePicker";
             </nav>
           </div>
 
-          <div class="flex gap-5 items-center">
+          <div class='flex gap-5 items-center'>
             <LanguagePicker client:idle />
 
             <SignedIn client:load>
-              <UserButton client:load afterSignOutUrl="/" />
+              <UserButton
+                client:load
+                afterSignOutUrl='/'
+              />
             </SignedIn>
 
             <SignedOut client:load>
-              <div class="sm:flex sm:gap-4">
+              <div class='sm:flex sm:gap-4'>
                 <a
-                  class="inline-flex group relative isolate w-fit transform-gpu overflow-hidden rounded-md px-3 py-[0.1875rem] cursor-pointer after:absolute after:inset-0 after:hover:opacity-100 transition duration-300 ease-[cubic-bezier(.4,.36,0,1)] after:duration-300 after:ease-[cubic-bezier(.4,.36,0,1)] after:transtion-opacity shadow-[inset_0px_1px_0px_theme(colors.white/12%),inset_0px_-1px_0px_theme(colors.white/4%),0px_2px_2px_-1px_rgb(66,67,77,0.24),0px_4px_4px_-2px_rgb(66,67,77,0.12)] bg-[#3C169C] ring-1 ring-[#230B6A] after:bg-[linear-gradient(theme(colors.white/24%),theme(colors.white/16%)_46%,theme(colors.white/12%)_54%,theme(colors.white/8%))] after:opacity-60 [--text-color:#FFFFFF]"
-                  href="/sign-in"
+                  class='inline-flex group relative isolate w-fit transform-gpu overflow-hidden rounded-md px-3 py-[0.1875rem] cursor-pointer after:absolute after:inset-0 after:hover:opacity-100 transition duration-300 ease-[cubic-bezier(.4,.36,0,1)] after:duration-300 after:ease-[cubic-bezier(.4,.36,0,1)] after:transtion-opacity shadow-[inset_0px_1px_0px_theme(colors.white/12%),inset_0px_-1px_0px_theme(colors.white/4%),0px_2px_2px_-1px_rgb(66,67,77,0.24),0px_4px_4px_-2px_rgb(66,67,77,0.12)] bg-[#3C169C] ring-1 ring-[#230B6A] after:bg-[linear-gradient(theme(colors.white/24%),theme(colors.white/16%)_46%,theme(colors.white/12%)_54%,theme(colors.white/8%))] after:opacity-60 [--text-color:#FFFFFF]'
+                  href='/sign-in'
                 >
                   <span
-                    class="text-[0.8125rem] font-medium leading-6 text-[--text-color] drop-shadow-[--text-drop-shadow]"
+                    class='text-[0.8125rem] font-medium leading-6 text-[--text-color] drop-shadow-[--text-drop-shadow]'
                   >
                     Login
                   </span>
                 </a>
 
-                <div class="hidden sm:flex">
+                <div class='hidden sm:flex'>
                   <a
-                    class="inline-flex group relative isolate w-fit transform-gpu overflow-hidden rounded-md px-3 py-[0.1875rem] cursor-pointer after:absolute after:inset-0 after:hover:opacity-100 transition duration-300 ease-[cubic-bezier(.4,.36,0,1)] after:duration-300 after:ease-[cubic-bezier(.4,.36,0,1)] after:transtion-opacity shadow-[inset_0px_1px_0px_theme(colors.white/12%),inset_0px_-1px_0px_theme(colors.white/4%),0px_2px_2px_-1px_rgb(66,67,77,0.24),0px_4px_4px_-2px_rgb(66,67,77,0.12)] bg-newGray-900 ring-1 ring-newGray-950 after:bg-[linear-gradient(theme(colors.white/24%),theme(colors.white/16%)_46%,theme(colors.white/12%)_54%,theme(colors.white/8%))] after:opacity-60 [--text-color:#FFFFFF]"
-                    href="/sign-up"
+                    class='inline-flex group relative isolate w-fit transform-gpu overflow-hidden rounded-md px-3 py-[0.1875rem] cursor-pointer after:absolute after:inset-0 after:hover:opacity-100 transition duration-300 ease-[cubic-bezier(.4,.36,0,1)] after:duration-300 after:ease-[cubic-bezier(.4,.36,0,1)] after:transtion-opacity shadow-[inset_0px_1px_0px_theme(colors.white/12%),inset_0px_-1px_0px_theme(colors.white/4%),0px_2px_2px_-1px_rgb(66,67,77,0.24),0px_4px_4px_-2px_rgb(66,67,77,0.12)] bg-newGray-900 ring-1 ring-newGray-950 after:bg-[linear-gradient(theme(colors.white/24%),theme(colors.white/16%)_46%,theme(colors.white/12%)_54%,theme(colors.white/8%))] after:opacity-60 [--text-color:#FFFFFF]'
+                    href='/sign-up'
                   >
                     <span
-                      class="text-[0.8125rem] font-medium leading-6 text-[--text-color] drop-shadow-[--text-drop-shadow]"
+                      class='text-[0.8125rem] font-medium leading-6 text-[--text-color] drop-shadow-[--text-drop-shadow]'
                     >
                       Register
                     </span>
@@ -108,12 +127,7 @@ import { LanguagePicker } from "../../components/LanguagePicker";
     --accent: 136, 58, 234;
     --accent-light: 224, 204, 250;
     --accent-dark: 49, 10, 101;
-    --accent-gradient: linear-gradient(
-      45deg,
-      rgb(var(--accent)),
-      rgb(var(--accent-light)) 30%,
-      white 60%
-    );
+    --accent-gradient: linear-gradient(45deg, rgb(var(--accent)), rgb(var(--accent-light)) 30%, white 60%);
   }
   html {
     font-family: system-ui, sans-serif;
diff --git a/integration/templates/astro-node/src/pages/buttons.astro b/integration/templates/astro-node/src/pages/buttons.astro
index 53b21ce9620..cf031b9acbd 100644
--- a/integration/templates/astro-node/src/pages/buttons.astro
+++ b/integration/templates/astro-node/src/pages/buttons.astro
@@ -1,23 +1,21 @@
 ---
 import { SignInButton, SignUpButton } from '@clerk/astro/components';
 
-import Layout from "../layouts/Layout.astro";
+import Layout from '../layouts/Layout.astro';
 ---
 
-<Layout title="Welcome to Astro.">
+<Layout title='Welcome to Astro.'>
   <SignInButton
     asChild
-    mode="modal"
-    fallbackRedirectUrl="/user"
+    mode='modal'
+    fallbackRedirectUrl='/user'
   >
-    <button>
-      Sign in
-    </button>
+    <button> Sign in </button>
   </SignInButton>
 
   <SignUpButton
-    mode="modal"
-    fallbackRedirectUrl="/user"
+    mode='modal'
+    fallbackRedirectUrl='/user'
   >
     Sign up
   </SignUpButton>
diff --git a/integration/templates/astro-node/src/pages/custom-pages/organization-profile.astro b/integration/templates/astro-node/src/pages/custom-pages/organization-profile.astro
index a00aeed5672..299ddc38e75 100644
--- a/integration/templates/astro-node/src/pages/custom-pages/organization-profile.astro
+++ b/integration/templates/astro-node/src/pages/custom-pages/organization-profile.astro
@@ -1,9 +1,6 @@
 ---
-import {
-  OrganizationProfile as OrganizationProfileAstro,
-  OrganizationSwitcher
-} from "@clerk/astro/components";
-import Layout from "../../layouts/Layout.astro";
+import { OrganizationProfile as OrganizationProfileAstro, OrganizationSwitcher } from '@clerk/astro/components';
+import Layout from '../../layouts/Layout.astro';
 
 // Added a dedicatedPage query param to conditionally render the OrganizationProfile
 // as for some reason, the menu items in the OrganizationSwitcher
@@ -11,39 +8,53 @@ import Layout from "../../layouts/Layout.astro";
 const dedicatedPage = Astro.url.searchParams.get('dedicatedPage') === 'true';
 ---
 
-<Layout title="Custom Pages">
-  <div class="w-full flex justify-center">
+<Layout title='Custom Pages'>
+  <div class='w-full flex justify-center'>
     <OrganizationSwitcher>
-        {
-          !dedicatedPage && (
-            <OrganizationSwitcher.OrganizationProfilePage label="Terms" url="terms">
-                <div slot="label-icon">Icon</div>
-                <div>
-                    <h1>Custom Terms Page</h1>
-                    <p>This is the custom terms page</p>
-                </div>
+      {
+        !dedicatedPage && (
+          <Fragment>
+            <OrganizationSwitcher.OrganizationProfilePage
+              label='Terms'
+              url='terms'
+            >
+              <div slot='label-icon'>Icon</div>
+              <div>
+                <h1>Custom Terms Page</h1>
+                <p>This is the custom terms page</p>
+              </div>
             </OrganizationSwitcher.OrganizationProfilePage>
-            <OrganizationSwitcher.OrganizationProfileLink label="Homepage" url="/">
-                <div slot="label-icon">Icon</div>
+            <OrganizationSwitcher.OrganizationProfileLink
+              label='Homepage'
+              url='/'
+            >
+              <div slot='label-icon'>Icon</div>
             </OrganizationSwitcher.OrganizationProfileLink>
-            <OrganizationSwitcher.OrganizationProfilePage label="members" />
-          )
-        }
+            <OrganizationSwitcher.OrganizationProfilePage label='members' />
+          </Fragment>
+        )
+      }
     </OrganizationSwitcher>
     {
       dedicatedPage && (
-        <OrganizationProfileAstro path="/custom-pages/organization-profile">
-            <OrganizationProfileAstro.Page label="Terms" url="terms">
-                <div slot="label-icon">Icon</div>
-                <div>
-                    <h1>Custom Terms Page</h1>
-                    <p>This is the custom terms page</p>
-                </div>
-            </OrganizationProfileAstro.Page>
-            <OrganizationProfileAstro.Link label="Homepage" url="/">
-                <div slot="label-icon">Icon</div>
-            </OrganizationProfileAstro.Link>
-            <OrganizationProfileAstro.Page label="general" />
+        <OrganizationProfileAstro path='/custom-pages/organization-profile'>
+          <OrganizationProfileAstro.Page
+            label='Terms'
+            url='terms'
+          >
+            <div slot='label-icon'>Icon</div>
+            <div>
+              <h1>Custom Terms Page</h1>
+              <p>This is the custom terms page</p>
+            </div>
+          </OrganizationProfileAstro.Page>
+          <OrganizationProfileAstro.Link
+            label='Homepage'
+            url='/'
+          >
+            <div slot='label-icon'>Icon</div>
+          </OrganizationProfileAstro.Link>
+          <OrganizationProfileAstro.Page label='general' />
         </OrganizationProfileAstro>
       )
     }
diff --git a/integration/templates/astro-node/src/pages/custom-pages/user-profile.astro b/integration/templates/astro-node/src/pages/custom-pages/user-profile.astro
index fd9da776934..bff8a311386 100644
--- a/integration/templates/astro-node/src/pages/custom-pages/user-profile.astro
+++ b/integration/templates/astro-node/src/pages/custom-pages/user-profile.astro
@@ -1,22 +1,28 @@
 ---
-import { UserProfile as UserProfileAstro } from "@clerk/astro/components";
-import Layout from "../../layouts/Layout.astro";
+import { UserProfile as UserProfileAstro } from '@clerk/astro/components';
+import Layout from '../../layouts/Layout.astro';
 ---
 
-<Layout title="Custom Pages">
-  <div class="w-full flex justify-center">
-    <UserProfileAstro path="/custom-pages/user-profile">
-        <UserProfileAstro.Page label="Terms" url="terms">
-            <div slot="label-icon">Icon</div>
-            <div>
-                <h1>Custom Terms Page</h1>
-                <p>This is the custom terms page</p>
-            </div>
-        </UserProfileAstro.Page>
-        <UserProfileAstro.Link label="Homepage" url="/">
-            <div slot="label-icon">Icon</div>
-        </UserProfileAstro.Link>
-        <UserProfileAstro.Page label="security" />
+<Layout title='Custom Pages'>
+  <div class='w-full flex justify-center'>
+    <UserProfileAstro path='/custom-pages/user-profile'>
+      <UserProfileAstro.Page
+        label='Terms'
+        url='terms'
+      >
+        <div slot='label-icon'>Icon</div>
+        <div>
+          <h1>Custom Terms Page</h1>
+          <p>This is the custom terms page</p>
+        </div>
+      </UserProfileAstro.Page>
+      <UserProfileAstro.Link
+        label='Homepage'
+        url='/'
+      >
+        <div slot='label-icon'>Icon</div>
+      </UserProfileAstro.Link>
+      <UserProfileAstro.Page label='security' />
     </UserProfileAstro>
   </div>
 </Layout>
diff --git a/integration/templates/astro-node/src/pages/discover.astro b/integration/templates/astro-node/src/pages/discover.astro
index 55f391ad27a..5eac49ec4fa 100644
--- a/integration/templates/astro-node/src/pages/discover.astro
+++ b/integration/templates/astro-node/src/pages/discover.astro
@@ -1,14 +1,14 @@
 ---
-import { OrganizationList } from "@clerk/astro/components";
-import Layout from "../layouts/Layout.astro";
+import { OrganizationList } from '@clerk/astro/components';
+import Layout from '../layouts/Layout.astro';
 ---
 
-<Layout title="Welcome to Astro.">
-  <div class="w-full flex justify-center">
+<Layout title='Welcome to Astro.'>
+  <div class='w-full flex justify-center'>
     <OrganizationList
-      afterSelectOrganizationUrl="/organization"
-      afterCreateOrganizationUrl="/organization"
-      afterSelectPersonalUrl="/user"
+      afterSelectOrganizationUrl='/organization'
+      afterCreateOrganizationUrl='/organization'
+      afterSelectPersonalUrl='/user'
     />
   </div>
 </Layout>
diff --git a/integration/templates/astro-node/src/pages/index.astro b/integration/templates/astro-node/src/pages/index.astro
index 5559f27e25d..089eac14653 100644
--- a/integration/templates/astro-node/src/pages/index.astro
+++ b/integration/templates/astro-node/src/pages/index.astro
@@ -1,65 +1,68 @@
 ---
-import Layout from "../layouts/Layout.astro";
-import Card from "../components/Card.astro";
+import Layout from '../layouts/Layout.astro';
+import Card from '../components/Card.astro';
 
-import { SignedIn, SignedOut, SignOutButton, OrganizationSwitcher } from "@clerk/astro/components";
+import { SignedIn, SignedOut, SignOutButton, OrganizationSwitcher } from '@clerk/astro/components';
 ---
 
-<Layout title="Welcome to Astro.">
-  <h1>Welcome to <span class="text-gradient">Astro</span></h1>
+<Layout title='Welcome to Astro.'>
+  <h1>Welcome to <span class='text-gradient'>Astro</span></h1>
   <SignedIn>
     <OrganizationSwitcher
       appearance={{
         elements: {
-          organizationPreview__organizationSwitcherTrigger: "text-white",
-          organizationSwitcherTriggerIcon: "text-white",
+          organizationPreview__organizationSwitcherTrigger: 'text-white',
+          organizationSwitcherTriggerIcon: 'text-white',
         },
       }}
-      afterSelectOrganizationUrl="/organization"
+      afterSelectOrganizationUrl='/organization'
     />
     <SignOutButton>Sign out!</SignOutButton>
   </SignedIn>
 
-  <div class="h-12"></div>
+  <div class='h-12'></div>
 
-  <ul role="list" class="link-card-grid">
+  <ul
+    role='list'
+    class='link-card-grid'
+  >
     <SignedOut>
       <Card
-        href="/sign-in"
-        title="Log in"
-        body="Go to this page to log in"
+        href='/sign-in'
+        title='Log in'
+        body='Go to this page to log in'
       />
       <Card
-        href="/sign-up"
-        title="Create account"
-        body="Supercharge your project with new frameworks and libraries."
+        href='/sign-up'
+        title='Create account'
+        body='Supercharge your project with new frameworks and libraries.'
       />
     </SignedOut>
     <SignedIn>
       <Card
-        href="/user"
-        title="User Profile"
-        body="Go to this page to see your profile"
+        href='/user'
+        title='User Profile'
+        body='Go to this page to see your profile'
       />
       <Card
-        href="/organization"
-        title="Active Organization"
-        body="Learn how Astro works and explore the official API docs."
+        href='/organization'
+        title='Active Organization'
+        body='Learn how Astro works and explore the official API docs.'
       />
       <Card
-        href="/discover"
-        title="Discover Organization"
-        body="Learn how Astro works and explore the official API docs."
+        href='/discover'
+        title='Discover Organization'
+        body='Learn how Astro works and explore the official API docs.'
       />
       <Card
-        href="/only-admins"
-        title="For admins"
-        body={"Learn how Astro works and explore the official API docs."}
+        href='/only-admins'
+        title='For admins'
+        body={'Learn how Astro works and explore the official API docs.'}
       />
       <Card
-        href="/only-members"
-        title="For members"
-        body="Learn how Astro works and explore the official API docs."
+        href='/only-members'
+        title='For members'
+        body='Learn how Astro works and explore the official API docs.'
       />
     </SignedIn>
   </ul>
@@ -83,10 +86,7 @@ import { SignedIn, SignedOut, SignOutButton, OrganizationSwitcher } from "@clerk
   .instructions {
     margin-bottom: 2rem;
     border: 1px solid rgba(var(--accent-light), 25%);
-    background: linear-gradient(
-      rgba(var(--accent-dark), 66%),
-      rgba(var(--accent-dark), 33%)
-    );
+    background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
     padding: 1.5rem;
     border-radius: 8px;
   }
diff --git a/integration/templates/astro-node/src/pages/only-admins.astro b/integration/templates/astro-node/src/pages/only-admins.astro
index ec023061d1e..f2241732454 100644
--- a/integration/templates/astro-node/src/pages/only-admins.astro
+++ b/integration/templates/astro-node/src/pages/only-admins.astro
@@ -1,19 +1,20 @@
 ---
-import { Protect } from "@clerk/astro/components";
-import Layout from "../layouts/Layout.astro";
+import { Protect } from '@clerk/astro/components';
+import Layout from '../layouts/Layout.astro';
 ---
 
-<Layout title="Page is only accessible by members">
-  <div class="w-full flex justify-center flex-col">
-    <Protect role="org:admin">
-      <Fragment slot="fallback">
-        <h1 class="text-2xl text-center">Not an admin</h1>
+<Layout title='Page is only accessible by members'>
+  <div class='w-full flex justify-center flex-col'>
+    <Protect role='org:admin'>
+      <Fragment slot='fallback'>
+        <h1 class='text-2xl text-center'>Not an admin</h1>
         <a
-          class="text-sm text-center text-gray-100 transition hover:text-gray-400"
-          href="/only-members">Go to Members Page</a
+          class='text-sm text-center text-gray-100 transition hover:text-gray-400'
+          href='/only-members'
+          >Go to Members Page</a
         >
       </Fragment>
-      <h1 class="text-2xl text-center">I'm an admin</h1>
+      <h1 class='text-2xl text-center'>I'm an admin</h1>
     </Protect>
   </div>
 </Layout>
diff --git a/integration/templates/astro-node/src/pages/only-members.astro b/integration/templates/astro-node/src/pages/only-members.astro
index 5ad7150dba5..f013bd27cdb 100644
--- a/integration/templates/astro-node/src/pages/only-members.astro
+++ b/integration/templates/astro-node/src/pages/only-members.astro
@@ -1,19 +1,20 @@
 ---
-import { Protect } from "@clerk/astro/components";
-import Layout from "../layouts/Layout.astro";
+import { Protect } from '@clerk/astro/components';
+import Layout from '../layouts/Layout.astro';
 ---
 
-<Layout title="Page is only accessible by members">
-  <div class="w-full flex justify-center flex-col">
-    <Protect role="basic_member">
-      <Fragment slot="fallback">
-        <h1 class="text-2xl text-center">Not a member</h1>
+<Layout title='Page is only accessible by members'>
+  <div class='w-full flex justify-center flex-col'>
+    <Protect role='basic_member'>
+      <Fragment slot='fallback'>
+        <h1 class='text-2xl text-center'>Not a member</h1>
         <a
-          class="text-sm text-center text-gray-100 transition hover:text-gray-400"
-          href="/only-admins">Go to Admin Page</a
+          class='text-sm text-center text-gray-100 transition hover:text-gray-400'
+          href='/only-admins'
+          >Go to Admin Page</a
         >
       </Fragment>
-      <h1 class="text-2xl text-center">I'm a member</h1>
+      <h1 class='text-2xl text-center'>I'm a member</h1>
     </Protect>
   </div>
 </Layout>
diff --git a/integration/templates/astro-node/src/pages/organization.astro b/integration/templates/astro-node/src/pages/organization.astro
index 4e6c9a06097..dab9244cb51 100644
--- a/integration/templates/astro-node/src/pages/organization.astro
+++ b/integration/templates/astro-node/src/pages/organization.astro
@@ -1,25 +1,22 @@
 ---
-import {
-  OrganizationSwitcher,
-  OrganizationProfile,
-} from "@clerk/astro/components";
-import Layout from "../layouts/Layout.astro";
-import Streaming from "../layouts/Streaming.astro";
+import { OrganizationSwitcher, OrganizationProfile } from '@clerk/astro/components';
+import Layout from '../layouts/Layout.astro';
+import Streaming from '../layouts/Streaming.astro';
 
-const { userId, redirectToSignIn } = Astro.locals.auth()
+const { userId, redirectToSignIn } = Astro.locals.auth();
 
-if(!userId) {
-  return redirectToSignIn()
+if (!userId) {
+  return redirectToSignIn();
 }
 ---
 
-<Layout title="Welcome to Astro.">
+<Layout title='Welcome to Astro.'>
   <Streaming />
-  <div class="w-full flex justify-center flex-col">
+  <div class='w-full flex justify-center flex-col'>
     <OrganizationSwitcher
       appearance={{
         elements: {
-          organizationSwitcherTrigger: "text-white",
+          organizationSwitcherTrigger: 'text-white',
         },
       }}
     />
diff --git a/integration/templates/astro-node/src/pages/react/index.astro b/integration/templates/astro-node/src/pages/react/index.astro
index c15a8c3ee59..5fe777167f7 100644
--- a/integration/templates/astro-node/src/pages/react/index.astro
+++ b/integration/templates/astro-node/src/pages/react/index.astro
@@ -1,71 +1,73 @@
 ---
-import Layout from "../../layouts/react/Layout.astro";
-import Card from "../../components/Card.astro";
+import Layout from '../../layouts/react/Layout.astro';
+import Card from '../../components/Card.astro';
 
-import { SignedIn, SignedOut, SignOutButton, OrganizationSwitcher } from "@clerk/astro/react";
+import { SignedIn, SignedOut, SignOutButton, OrganizationSwitcher } from '@clerk/astro/react';
 ---
 
-<Layout title="Welcome to Astro.">
-  <h1>Welcome to <span class="text-gradient">Astro</span> + React</h1>
+<Layout title='Welcome to Astro.'>
+  <h1>Welcome to <span class='text-gradient'>Astro</span> + React</h1>
   <SignedIn client:load>
     <OrganizationSwitcher
       client:load
       appearance={{
         elements: {
-          organizationPreview__organizationSwitcherTrigger: "text-white",
-          organizationSwitcherTriggerIcon: "text-white",
+          organizationPreview__organizationSwitcherTrigger: 'text-white',
+          organizationSwitcherTriggerIcon: 'text-white',
         },
       }}
-      afterSelectOrganizationUrl="/organization"
+      afterSelectOrganizationUrl='/organization'
     />
     <SignOutButton client:load>Sign out!</SignOutButton>
   </SignedIn>
 
-  <div class="h-12"></div>
+  <div class='h-12'></div>
 
-  <p class="instructions">
-    To get started, open the directory <code>src/pages</code> in your project.<br
-    />
+  <p class='instructions'>
+    To get started, open the directory <code>src/pages</code> in your project.<br />
     <strong>Code Challenge:</strong> Tweak the "Welcome to Astro" message above.
   </p>
-  <ul role="list" class="link-card-grid">
+  <ul
+    role='list'
+    class='link-card-grid'
+  >
     <SignedOut client:load>
       <Card
-        href="/sign-in"
-        title="Log in"
-        body="Go to this page to log in"
+        href='/sign-in'
+        title='Log in'
+        body='Go to this page to log in'
       />
       <Card
-        href="/sign-up"
-        title="Create account"
-        body="Supercharge your project with new frameworks and libraries."
+        href='/sign-up'
+        title='Create account'
+        body='Supercharge your project with new frameworks and libraries.'
       />
     </SignedOut>
     <SignedIn client:load>
       <Card
-        href="/user"
-        title="User Profile"
-        body="Go to this page to see your profile"
+        href='/user'
+        title='User Profile'
+        body='Go to this page to see your profile'
       />
       <Card
-        href="/organization"
-        title="Active Organization"
-        body="Learn how Astro works and explore the official API docs."
+        href='/organization'
+        title='Active Organization'
+        body='Learn how Astro works and explore the official API docs.'
       />
       <Card
-        href="/discover"
-        title="Discover Organization"
-        body="Learn how Astro works and explore the official API docs."
+        href='/discover'
+        title='Discover Organization'
+        body='Learn how Astro works and explore the official API docs.'
       />
       <Card
-        href="/only-admins"
-        title="For admins"
-        body={"Learn how Astro works and explore the official API docs."}
+        href='/only-admins'
+        title='For admins'
+        body={'Learn how Astro works and explore the official API docs.'}
       />
       <Card
-        href="/only-members"
-        title="For members"
-        body="Learn how Astro works and explore the official API docs."
+        href='/only-members'
+        title='For members'
+        body='Learn how Astro works and explore the official API docs.'
       />
     </SignedIn>
   </ul>
@@ -89,10 +91,7 @@ import { SignedIn, SignedOut, SignOutButton, OrganizationSwitcher } from "@clerk
   .instructions {
     margin-bottom: 2rem;
     border: 1px solid rgba(var(--accent-light), 25%);
-    background: linear-gradient(
-      rgba(var(--accent-dark), 66%),
-      rgba(var(--accent-dark), 33%)
-    );
+    background: linear-gradient(rgba(var(--accent-dark), 66%), rgba(var(--accent-dark), 33%));
     padding: 1.5rem;
     border-radius: 8px;
   }
diff --git a/integration/templates/astro-node/src/pages/react/only-admins.astro b/integration/templates/astro-node/src/pages/react/only-admins.astro
index 1e05ae3f2d7..0ad2bc1b2ba 100644
--- a/integration/templates/astro-node/src/pages/react/only-admins.astro
+++ b/integration/templates/astro-node/src/pages/react/only-admins.astro
@@ -1,19 +1,23 @@
 ---
-import { Protect } from "@clerk/astro/react";
-import Layout from "../../layouts/react/Layout.astro";
+import { Protect } from '@clerk/astro/react';
+import Layout from '../../layouts/react/Layout.astro';
 ---
 
-<Layout title="Page is only accessible by members">
-  <div class="w-full flex justify-center flex-col">
-    <Protect client:load role="org:admin">
-      <Fragment slot="fallback">
-        <h1 class="text-2xl text-center">Not an admin</h1>
+<Layout title='Page is only accessible by members'>
+  <div class='w-full flex justify-center flex-col'>
+    <Protect
+      client:load
+      role='org:admin'
+    >
+      <Fragment slot='fallback'>
+        <h1 class='text-2xl text-center'>Not an admin</h1>
         <a
-          class="text-sm text-center text-gray-100 transition hover:text-gray-400"
-          href="/only-members">Go to Members Page</a
+          class='text-sm text-center text-gray-100 transition hover:text-gray-400'
+          href='/only-members'
+          >Go to Members Page</a
         >
       </Fragment>
-      <h1 class="text-2xl text-center">I'm an admin</h1>
+      <h1 class='text-2xl text-center'>I'm an admin</h1>
     </Protect>
   </div>
 </Layout>
diff --git a/integration/templates/astro-node/src/pages/react/only-members.astro b/integration/templates/astro-node/src/pages/react/only-members.astro
index bd4ebd0343c..e0fd91dc11f 100644
--- a/integration/templates/astro-node/src/pages/react/only-members.astro
+++ b/integration/templates/astro-node/src/pages/react/only-members.astro
@@ -1,19 +1,23 @@
 ---
-import { Protect } from "@clerk/astro/react";
-import Layout from "../../layouts/react/Layout.astro";
+import { Protect } from '@clerk/astro/react';
+import Layout from '../../layouts/react/Layout.astro';
 ---
 
-<Layout title="Page is only accessible by members">
-  <div class="w-full flex justify-center flex-col">
-    <Protect client:load role="basic_member">
-      <Fragment slot="fallback">
-        <h1 class="text-2xl text-center">Not a member</h1>
+<Layout title='Page is only accessible by members'>
+  <div class='w-full flex justify-center flex-col'>
+    <Protect
+      client:load
+      role='basic_member'
+    >
+      <Fragment slot='fallback'>
+        <h1 class='text-2xl text-center'>Not a member</h1>
         <a
-          class="text-sm text-center text-gray-100 transition hover:text-gray-400"
-          href="/only-admins">Go to Admin Page</a
+          class='text-sm text-center text-gray-100 transition hover:text-gray-400'
+          href='/only-admins'
+          >Go to Admin Page</a
         >
       </Fragment>
-      <h1 class="text-2xl text-center">I'm a member</h1>
+      <h1 class='text-2xl text-center'>I'm a member</h1>
     </Protect>
   </div>
 </Layout>
diff --git a/integration/templates/astro-node/src/pages/react/sign-in.astro b/integration/templates/astro-node/src/pages/react/sign-in.astro
index fc99e1473e8..b3c1aa9120d 100644
--- a/integration/templates/astro-node/src/pages/react/sign-in.astro
+++ b/integration/templates/astro-node/src/pages/react/sign-in.astro
@@ -1,10 +1,10 @@
 ---
-import { SignIn } from "@clerk/astro/react";
-import Layout from "../../layouts/react/Layout.astro";
+import { SignIn } from '@clerk/astro/react';
+import Layout from '../../layouts/react/Layout.astro';
 ---
 
-<Layout title="Welcome to Astro.">
-  <div class="w-full flex justify-center">
+<Layout title='Welcome to Astro.'>
+  <div class='w-full flex justify-center'>
     <SignIn client:load />
   </div>
 </Layout>
diff --git a/integration/templates/astro-node/src/pages/react/user.astro b/integration/templates/astro-node/src/pages/react/user.astro
index 2de93c316cd..5ec8b122954 100644
--- a/integration/templates/astro-node/src/pages/react/user.astro
+++ b/integration/templates/astro-node/src/pages/react/user.astro
@@ -1,11 +1,11 @@
 ---
-import { UserProfile } from "@clerk/astro/components/interactive";
-import Layout from "../../layouts/react/Layout.astro";
-import {PageWithUser} from "../../components/page-with-user";
-import StreamUser from "../../components/StreamUser.astro";
+import { UserProfile } from '@clerk/astro/components/interactive';
+import Layout from '../../layouts/react/Layout.astro';
+import { PageWithUser } from '../../components/page-with-user';
+import StreamUser from '../../components/StreamUser.astro';
 ---
 
-<Layout title="Welcome to Astro.">
+<Layout title='Welcome to Astro.'>
   <!--<UserProfile client:load/>-->
   <PageWithUser client:load>
     <StreamUser />
diff --git a/integration/templates/astro-node/src/pages/server-islands.astro b/integration/templates/astro-node/src/pages/server-islands.astro
index 7366ee0f249..47f43bb3aef 100644
--- a/integration/templates/astro-node/src/pages/server-islands.astro
+++ b/integration/templates/astro-node/src/pages/server-islands.astro
@@ -1,20 +1,24 @@
 ---
-import { Protect } from "@clerk/astro/components";
-import Layout from "../layouts/Layout.astro";
+import { Protect } from '@clerk/astro/components';
+import Layout from '../layouts/Layout.astro';
 ---
 
-<Layout title="Page is only accessible by members">
-  <div class="w-full flex justify-center flex-col">
-    <Protect server:defer role="org:admin">
-      <p slot="fallback">Loading</p>
-      <Fragment slot="protect-fallback">
-        <h1 class="text-2xl text-center">Not an admin</h1>
+<Layout title='Page is only accessible by members'>
+  <div class='w-full flex justify-center flex-col'>
+    <Protect
+      server:defer
+      role='org:admin'
+    >
+      <p slot='fallback'>Loading</p>
+      <Fragment slot='protect-fallback'>
+        <h1 class='text-2xl text-center'>Not an admin</h1>
         <a
-          class="text-sm text-center text-gray-100 transition hover:text-gray-400"
-          href="/only-members">Go to Members Page</a
+          class='text-sm text-center text-gray-100 transition hover:text-gray-400'
+          href='/only-members'
+          >Go to Members Page</a
         >
       </Fragment>
-      <h1 class="text-2xl text-center">I'm an admin</h1>
+      <h1 class='text-2xl text-center'>I'm an admin</h1>
     </Protect>
   </div>
 </Layout>
diff --git a/integration/templates/astro-node/src/pages/sign-in.astro b/integration/templates/astro-node/src/pages/sign-in.astro
index 9099c11ad27..a559e724d7d 100644
--- a/integration/templates/astro-node/src/pages/sign-in.astro
+++ b/integration/templates/astro-node/src/pages/sign-in.astro
@@ -1,10 +1,10 @@
 ---
-import { SignIn } from "@clerk/astro/components";
-import Layout from "../layouts/Layout.astro";
+import { SignIn } from '@clerk/astro/components';
+import Layout from '../layouts/Layout.astro';
 ---
 
-<Layout title="Welcome to Astro.">
-  <div class="w-full flex justify-center">
+<Layout title='Welcome to Astro.'>
+  <div class='w-full flex justify-center'>
     <SignIn />
   </div>
 </Layout>
diff --git a/integration/templates/astro-node/src/pages/transitions/index.astro b/integration/templates/astro-node/src/pages/transitions/index.astro
index a9465f5eb46..af29b083fcc 100644
--- a/integration/templates/astro-node/src/pages/transitions/index.astro
+++ b/integration/templates/astro-node/src/pages/transitions/index.astro
@@ -1,15 +1,15 @@
 ---
-import { SignedIn, SignedOut, UserButton } from "@clerk/astro/components";
-import Layout from "../../layouts/ViewTransitionsLayout.astro";
+import { SignedIn, SignedOut, UserButton } from '@clerk/astro/components';
+import Layout from '../../layouts/ViewTransitionsLayout.astro';
 ---
 
-<Layout title="Sign in">
-  <div class="w-full flex justify-center">
+<Layout title='Sign in'>
+  <div class='w-full flex justify-center'>
     <SignedOut>
-        <a href="/transitions/sign-in">Sign in</a>
+      <a href='/transitions/sign-in'>Sign in</a>
     </SignedOut>
     <SignedIn>
-        <UserButton />
+      <UserButton />
     </SignedIn>
   </div>
 </Layout>
diff --git a/integration/templates/astro-node/src/pages/transitions/sign-in.astro b/integration/templates/astro-node/src/pages/transitions/sign-in.astro
index 5afdd5a3489..61ad9e28ba8 100644
--- a/integration/templates/astro-node/src/pages/transitions/sign-in.astro
+++ b/integration/templates/astro-node/src/pages/transitions/sign-in.astro
@@ -1,10 +1,10 @@
 ---
-import { SignIn } from "@clerk/astro/components";
-import Layout from "../../layouts/ViewTransitionsLayout.astro";
+import { SignIn } from '@clerk/astro/components';
+import Layout from '../../layouts/ViewTransitionsLayout.astro';
 ---
 
-<Layout title="Sign in">
-  <div class="w-full flex justify-center">
-    <SignIn forceRedirectUrl="/transitions" />
+<Layout title='Sign in'>
+  <div class='w-full flex justify-center'>
+    <SignIn forceRedirectUrl='/transitions' />
   </div>
 </Layout>
diff --git a/integration/templates/astro-node/src/pages/user.astro b/integration/templates/astro-node/src/pages/user.astro
index b0162f56216..1140854405f 100644
--- a/integration/templates/astro-node/src/pages/user.astro
+++ b/integration/templates/astro-node/src/pages/user.astro
@@ -1,11 +1,11 @@
 ---
-import { UserProfile } from "@clerk/astro/components";
-import Layout from "../layouts/Layout.astro";
-import StreamUser from "../components/StreamUser.astro";
+import { UserProfile } from '@clerk/astro/components';
+import Layout from '../layouts/Layout.astro';
+import StreamUser from '../components/StreamUser.astro';
 ---
 
-<Layout title="Welcome to Astro.">
-  <div class="w-full flex justify-center">
+<Layout title='Welcome to Astro.'>
+  <div class='w-full flex justify-center'>
     <UserProfile />
   </div>
   <StreamUser />
diff --git a/integration/templates/astro-node/src/pages/utility.astro b/integration/templates/astro-node/src/pages/utility.astro
index e6ba210121b..a91625d969f 100644
--- a/integration/templates/astro-node/src/pages/utility.astro
+++ b/integration/templates/astro-node/src/pages/utility.astro
@@ -1,13 +1,13 @@
 ---
 import { ClerkLoaded, ClerkLoading } from '@clerk/astro/react';
-import Layout from "../layouts/Layout.astro";
+import Layout from '../layouts/Layout.astro';
 ---
 
-<Layout title="Utility">
-    <ClerkLoading client:load>
-      <div>Clerk is loading</div>
-    </ClerkLoading>
-    <ClerkLoaded client:load>
-        <div>Clerk is loaded</div>
-    </ClerkLoaded>
+<Layout title='Utility'>
+  <ClerkLoading client:load>
+    <div>Clerk is loading</div>
+  </ClerkLoading>
+  <ClerkLoaded client:load>
+    <div>Clerk is loaded</div>
+  </ClerkLoaded>
 </Layout>
diff --git a/package.json b/package.json
index 6f49964bd3c..09b7ffd0e0f 100644
--- a/package.json
+++ b/package.json
@@ -123,6 +123,7 @@
     "jsonwebtoken": "9.0.2",
     "lint-staged": "^14.0.1",
     "prettier": "^3.5.3",
+    "prettier-plugin-astro": "^0.14.1",
     "prettier-plugin-packagejson": "^2.5.15",
     "prettier-plugin-tailwindcss": "^0.6.12",
     "publint": "^0.3.12",
diff --git a/packages/astro/src/astro-components/control/AuthenticateWithRedirectCallback.astro b/packages/astro/src/astro-components/control/AuthenticateWithRedirectCallback.astro
index 713cf3117c4..aef20144140 100644
--- a/packages/astro/src/astro-components/control/AuthenticateWithRedirectCallback.astro
+++ b/packages/astro/src/astro-components/control/AuthenticateWithRedirectCallback.astro
@@ -1,7 +1,7 @@
 ---
 import type { HandleOAuthCallbackParams } from '@clerk/types';
 
-type Props = HandleOAuthCallbackParams
+type Props = HandleOAuthCallbackParams;
 
 import { generateSafeId } from '@clerk/astro/internal';
 
diff --git a/packages/astro/src/astro-components/control/Protect.astro b/packages/astro/src/astro-components/control/Protect.astro
index 1868132bd34..c7e039987f4 100644
--- a/packages/astro/src/astro-components/control/Protect.astro
+++ b/packages/astro/src/astro-components/control/Protect.astro
@@ -2,11 +2,11 @@
 import ProtectCSR from './ProtectCSR.astro';
 import ProtectSSR from './ProtectSSR.astro';
 
-import { isStaticOutput } from "virtual:@clerk/astro/config";
+import { isStaticOutput } from 'virtual:@clerk/astro/config';
 import type { ProtectProps } from '../../types';
 
 type Props = ProtectProps & {
-  isStatic?: boolean
+  isStatic?: boolean;
   /**
    * The class name to apply to the outermost element of the component.
    * This class is only applied to static components.
@@ -22,7 +22,7 @@ type Props = ProtectProps & {
    * This class is only applied to static components.
    */
   fallbackSlotWrapperClass?: string;
-}
+};
 
 const { isStatic, ...props } = Astro.props;
 
@@ -36,9 +36,17 @@ const hasProtectFallback = Astro.slots.has('protect-fallback');
 
 <ProtectComponent {...props}>
   <slot />
-  {hasProtectFallback ? (
-    <slot name="protect-fallback" slot="protect-fallback" />
-  ) : (
-    <slot name="fallback" slot="fallback" />
-  )}
+  {
+    hasProtectFallback ? (
+      <slot
+        name='protect-fallback'
+        slot='protect-fallback'
+      />
+    ) : (
+      <slot
+        name='fallback'
+        slot='fallback'
+      />
+    )
+  }
 </ProtectComponent>
diff --git a/packages/astro/src/astro-components/control/ProtectCSR.astro b/packages/astro/src/astro-components/control/ProtectCSR.astro
index a41f3bce716..cee284935c5 100644
--- a/packages/astro/src/astro-components/control/ProtectCSR.astro
+++ b/packages/astro/src/astro-components/control/ProtectCSR.astro
@@ -7,7 +7,15 @@ type Props = Omit<ProtectProps, 'condition'> & {
   fallbackSlotWrapperClass?: string;
 };
 
-const { role, permission, feature, plan, class: className, defaultSlotWrapperClass, fallbackSlotWrapperClass } = Astro.props;
+const {
+  role,
+  permission,
+  feature,
+  plan,
+  class: className,
+  defaultSlotWrapperClass,
+  fallbackSlotWrapperClass,
+} = Astro.props;
 ---
 
 <clerk-protect
@@ -17,45 +25,55 @@ const { role, permission, feature, plan, class: className, defaultSlotWrapperCla
   data-plan={plan}
   class={className}
 >
-  <div class={defaultSlotWrapperClass} hidden data-clerk-control-slot-default>
+  <div
+    class={defaultSlotWrapperClass}
+    hidden
+    data-clerk-control-slot-default
+  >
     <slot />
   </div>
-  <div class={fallbackSlotWrapperClass} hidden data-clerk-control-slot-fallback>
-    <slot name="fallback" />
+  <div
+    class={fallbackSlotWrapperClass}
+    hidden
+    data-clerk-control-slot-fallback
+  >
+    <slot name='fallback' />
   </div>
 </clerk-protect>
 
 <script>
-import { $sessionStore } from '@clerk/astro/client';
-import { type AuthState, BaseClerkControlElement } from './BaseClerkControlElement';
-import type { CheckAuthorization } from '@clerk/types';
+  import { $sessionStore } from '@clerk/astro/client';
+  import { type AuthState, BaseClerkControlElement } from './BaseClerkControlElement';
+  import type { CheckAuthorization } from '@clerk/types';
 
-class ClerkProtect extends BaseClerkControlElement {
-  private defaultSlot: HTMLDivElement | null = null;
-  private fallbackSlot: HTMLDivElement | null = null;
+  class ClerkProtect extends BaseClerkControlElement {
+    private defaultSlot: HTMLDivElement | null = null;
+    private fallbackSlot: HTMLDivElement | null = null;
 
-  protected onAuthStateChange(state: AuthState): void {
-    this.defaultSlot = this.querySelector('[data-clerk-control-slot-default]');
-    this.fallbackSlot = this.querySelector('[data-clerk-control-slot-fallback]');
+    protected onAuthStateChange(state: AuthState): void {
+      this.defaultSlot = this.querySelector('[data-clerk-control-slot-default]');
+      this.fallbackSlot = this.querySelector('[data-clerk-control-slot-fallback]');
 
-    const has = $sessionStore.get()?.checkAuthorization;
+      const has = $sessionStore.get()?.checkAuthorization;
 
-    const role = this.dataset.role;
-    const permission = this.dataset.permission;
-    const feature = this.dataset.feature;
-    const plan = this.dataset.plan;
-    const isUnauthorized =
-      !state.userId || ((role || permission || feature || plan) && !has?.({ role, permission, feature, plan } as Parameters<CheckAuthorization>[0]));
+      const role = this.dataset.role;
+      const permission = this.dataset.permission;
+      const feature = this.dataset.feature;
+      const plan = this.dataset.plan;
+      const isUnauthorized =
+        !state.userId ||
+        ((role || permission || feature || plan) &&
+          !has?.({ role, permission, feature, plan } as Parameters<CheckAuthorization>[0]));
 
-    if (this.defaultSlot) {
-      isUnauthorized ? this.defaultSlot.setAttribute('hidden', '') : this.defaultSlot.removeAttribute('hidden');
-    }
+      if (this.defaultSlot) {
+        isUnauthorized ? this.defaultSlot.setAttribute('hidden', '') : this.defaultSlot.removeAttribute('hidden');
+      }
 
-    if (this.fallbackSlot) {
-      isUnauthorized ? this.fallbackSlot.removeAttribute('hidden') : this.fallbackSlot.setAttribute('hidden', '');
+      if (this.fallbackSlot) {
+        isUnauthorized ? this.fallbackSlot.removeAttribute('hidden') : this.fallbackSlot.setAttribute('hidden', '');
+      }
     }
   }
-}
 
-customElements.define('clerk-protect', ClerkProtect);
+  customElements.define('clerk-protect', ClerkProtect);
 </script>
diff --git a/packages/astro/src/astro-components/control/ProtectSSR.astro b/packages/astro/src/astro-components/control/ProtectSSR.astro
index b7117428dbe..e894af3ee03 100644
--- a/packages/astro/src/astro-components/control/ProtectSSR.astro
+++ b/packages/astro/src/astro-components/control/ProtectSSR.astro
@@ -12,14 +12,4 @@ const isUnauthorized =
 const hasProtectFallback = Astro.slots.has('protect-fallback');
 ---
 
-{
-  isUnauthorized ? (
-    hasProtectFallback ? (
-      <slot name="protect-fallback" />
-    ) : (
-      <slot name="fallback" />
-    )
-  ) : (
-    <slot />
-  )
-}
+{isUnauthorized ? hasProtectFallback ? <slot name='protect-fallback' /> : <slot name='fallback' /> : <slot />}
diff --git a/packages/astro/src/astro-components/control/SignedIn.astro b/packages/astro/src/astro-components/control/SignedIn.astro
index 4c6c33b0a4c..5b1b484e13d 100644
--- a/packages/astro/src/astro-components/control/SignedIn.astro
+++ b/packages/astro/src/astro-components/control/SignedIn.astro
@@ -5,15 +5,15 @@ import SignedInSSR from './SignedInSSR.astro';
 import { isStaticOutput } from 'virtual:@clerk/astro/config';
 
 type Props = {
-  isStatic?: boolean
+  isStatic?: boolean;
   /**
    * The class name to apply to the outermost element of the component.
    * This class is only applied to static components.
    */
-  class?: string
-}
+  class?: string;
+};
 
-const { isStatic, class: className } = Astro.props
+const { isStatic, class: className } = Astro.props;
 
 const SignedInComponent = isStaticOutput(isStatic) ? SignedInCSR : SignedInSSR;
 ---
diff --git a/packages/astro/src/astro-components/control/SignedInCSR.astro b/packages/astro/src/astro-components/control/SignedInCSR.astro
index c1010a4a179..750c60f718e 100644
--- a/packages/astro/src/astro-components/control/SignedInCSR.astro
+++ b/packages/astro/src/astro-components/control/SignedInCSR.astro
@@ -1,27 +1,30 @@
 ---
 type Props = {
-  class?: string
-}
+  class?: string;
+};
 
-const { class: className } = Astro.props
+const { class: className } = Astro.props;
 ---
 
-<clerk-signed-in class={className} hidden>
+<clerk-signed-in
+  class={className}
+  hidden
+>
   <slot />
 </clerk-signed-in>
 
 <script>
-import { type AuthState, BaseClerkControlElement } from './BaseClerkControlElement';
+  import { type AuthState, BaseClerkControlElement } from './BaseClerkControlElement';
 
-class ClerkSignedIn extends BaseClerkControlElement {
-  protected onAuthStateChange(state: AuthState): void {
-    if (state.userId) {
-      this.removeAttribute('hidden');
-    } else {
-      this.setAttribute('hidden', '');
+  class ClerkSignedIn extends BaseClerkControlElement {
+    protected onAuthStateChange(state: AuthState): void {
+      if (state.userId) {
+        this.removeAttribute('hidden');
+      } else {
+        this.setAttribute('hidden', '');
+      }
     }
   }
-}
 
-customElements.define('clerk-signed-in', ClerkSignedIn);
+  customElements.define('clerk-signed-in', ClerkSignedIn);
 </script>
diff --git a/packages/astro/src/astro-components/control/SignedInSSR.astro b/packages/astro/src/astro-components/control/SignedInSSR.astro
index 4253bcfe875..446b1997116 100644
--- a/packages/astro/src/astro-components/control/SignedInSSR.astro
+++ b/packages/astro/src/astro-components/control/SignedInSSR.astro
@@ -1,5 +1,5 @@
 ---
-const { userId } = Astro.locals.auth()
+const { userId } = Astro.locals.auth();
 ---
 
-{ userId ? <slot /> : null }
+{userId ? <slot /> : null}
diff --git a/packages/astro/src/astro-components/control/SignedOut.astro b/packages/astro/src/astro-components/control/SignedOut.astro
index 034df13f415..9161a518d3b 100644
--- a/packages/astro/src/astro-components/control/SignedOut.astro
+++ b/packages/astro/src/astro-components/control/SignedOut.astro
@@ -5,15 +5,15 @@ import SignedOutSSR from './SignedOutSSR.astro';
 import { isStaticOutput } from 'virtual:@clerk/astro/config';
 
 type Props = {
-  isStatic?: boolean
+  isStatic?: boolean;
   /**
    * The class name to apply to the outermost element of the component.
    * This class is only applied to static components.
    */
-  class?: string
-}
+  class?: string;
+};
 
-const { isStatic, class: className } = Astro.props
+const { isStatic, class: className } = Astro.props;
 
 const SignedOutComponent = isStaticOutput(isStatic) ? SignedOutCSR : SignedOutSSR;
 ---
diff --git a/packages/astro/src/astro-components/control/SignedOutCSR.astro b/packages/astro/src/astro-components/control/SignedOutCSR.astro
index 4540ef42ec9..3417917ac94 100644
--- a/packages/astro/src/astro-components/control/SignedOutCSR.astro
+++ b/packages/astro/src/astro-components/control/SignedOutCSR.astro
@@ -1,27 +1,30 @@
 ---
 type Props = {
-  class?: string
-}
+  class?: string;
+};
 
-const { class: className } = Astro.props
+const { class: className } = Astro.props;
 ---
 
-<clerk-signed-out class={className} hidden>
+<clerk-signed-out
+  class={className}
+  hidden
+>
   <slot />
 </clerk-signed-out>
 
 <script>
-import { type AuthState, BaseClerkControlElement } from './BaseClerkControlElement';
+  import { type AuthState, BaseClerkControlElement } from './BaseClerkControlElement';
 
-class ClerkSignedOut extends BaseClerkControlElement {
-  protected onAuthStateChange(state: AuthState): void {
-    if (state.userId) {
-      this.setAttribute('hidden', '');
-    } else {
-      this.removeAttribute('hidden');
+  class ClerkSignedOut extends BaseClerkControlElement {
+    protected onAuthStateChange(state: AuthState): void {
+      if (state.userId) {
+        this.setAttribute('hidden', '');
+      } else {
+        this.removeAttribute('hidden');
+      }
     }
   }
-}
 
-customElements.define('clerk-signed-out', ClerkSignedOut);
+  customElements.define('clerk-signed-out', ClerkSignedOut);
 </script>
diff --git a/packages/astro/src/astro-components/control/SignedOutSSR.astro b/packages/astro/src/astro-components/control/SignedOutSSR.astro
index 8b1b8154ad9..df4e890b890 100644
--- a/packages/astro/src/astro-components/control/SignedOutSSR.astro
+++ b/packages/astro/src/astro-components/control/SignedOutSSR.astro
@@ -1,5 +1,5 @@
 ---
-const { userId } = Astro.locals.auth()
+const { userId } = Astro.locals.auth();
 ---
 
-{ !userId ? <slot /> : null }
+{!userId ? <slot /> : null}
diff --git a/packages/astro/src/astro-components/interactive/CreateOrganization.astro b/packages/astro/src/astro-components/interactive/CreateOrganization.astro
index 733d1fcdf32..082f4ec617b 100644
--- a/packages/astro/src/astro-components/interactive/CreateOrganization.astro
+++ b/packages/astro/src/astro-components/interactive/CreateOrganization.astro
@@ -1,8 +1,11 @@
 ---
-import type { CreateOrganizationProps } from "@clerk/types";
-type Props = CreateOrganizationProps
+import type { CreateOrganizationProps } from '@clerk/types';
+type Props = CreateOrganizationProps;
 
-import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
+import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro';
 ---
 
-<InternalUIComponentRenderer {...Astro.props} component="create-organization" />
+<InternalUIComponentRenderer
+  {...Astro.props}
+  component='create-organization'
+/>
diff --git a/packages/astro/src/astro-components/interactive/CustomProfilePageRenderer.astro b/packages/astro/src/astro-components/interactive/CustomProfilePageRenderer.astro
index a35b39c0564..73545add84e 100644
--- a/packages/astro/src/astro-components/interactive/CustomProfilePageRenderer.astro
+++ b/packages/astro/src/astro-components/interactive/CustomProfilePageRenderer.astro
@@ -1,16 +1,16 @@
 ---
 interface Props {
-  url: string
-  label: string
-  type: 'page' | 'link'
-  component: 'organization-profile' | 'user-profile' | 'organization-switcher'
-  reorderItemsLabels?: Readonly<Array<string>>
+  url: string;
+  label: string;
+  type: 'page' | 'link';
+  component: 'organization-profile' | 'user-profile' | 'organization-switcher';
+  reorderItemsLabels?: Readonly<Array<string>>;
 }
 
-const { url, label, type, component, reorderItemsLabels = [] } = Astro.props
+const { url, label, type, component, reorderItemsLabels = [] } = Astro.props;
 
 let labelIcon = '';
-let content = ''
+let content = '';
 
 if (Astro.slots.has('label-icon')) {
   labelIcon = await Astro.slots.render('label-icon');
@@ -22,55 +22,57 @@ if (Astro.slots.has('default') && type === 'page') {
 ---
 
 <script is:inline define:vars={{ url, label, content, labelIcon, type, component, reorderItemsLabels }}>
-// Get the component map from window that we set in the `<InternalUIComponentRenderer />`.
-const clerkComponentMap = window.__astro_clerk_component_props.get(component);
+  // Get the component map from window that we set in the `<InternalUIComponentRenderer />`.
+  const clerkComponentMap = window.__astro_clerk_component_props.get(component);
 
-const componentElement = document.querySelector(`[data-clerk-id^="clerk-${component}"]`);
+  const componentElement = document.querySelector(`[data-clerk-id^="clerk-${component}"]`);
 
-const safeId = componentElement.getAttribute('data-clerk-id');
-const currentOptions = clerkComponentMap.get(safeId);
+  const safeId = componentElement.getAttribute('data-clerk-id');
+  const currentOptions = clerkComponentMap.get(safeId);
 
-const isReorderItem = reorderItemsLabels.includes(label);
+  const isReorderItem = reorderItemsLabels.includes(label);
 
-let newCustomPage = { label }
+  let newCustomPage = { label };
 
-if (!isReorderItem) {
-  newCustomPage = {
-    ...newCustomPage,
-    url,
-    mountIcon: (el) => { el.innerHTML = labelIcon },
-    unmountIcon: () => { /* Implement cleanup if needed */ }
-  }
-
-  if (type === 'page') {
+  if (!isReorderItem) {
     newCustomPage = {
       ...newCustomPage,
-      mount: (el) => { el.innerHTML = content },
-      unmount: () => { /* Implement cleanup if needed */ }
+      url,
+      mountIcon: el => {
+        el.innerHTML = labelIcon;
+      },
+      unmountIcon: () => {
+        /* Implement cleanup if needed */
+      },
+    };
+
+    if (type === 'page') {
+      newCustomPage = {
+        ...newCustomPage,
+        mount: el => {
+          el.innerHTML = content;
+        },
+        unmount: () => {
+          /* Implement cleanup if needed */
+        },
+      };
     }
   }
-}
 
-// Custom <OrganizationProfile /> pages can be added inside
-// the <OrganizationSwitcher /> component.
-if (component === 'organization-switcher') {
-  clerkComponentMap.set(safeId, {
-    ...currentOptions,
-    organizationProfileProps: {
-      ...currentOptions.organizationProfileProps,
-      customPages: [
-        ...(currentOptions?.organizationProfileProps?.customPages ?? []),
-        newCustomPage
-      ]
-    }
-  })
-} else {
-  clerkComponentMap.set(safeId, {
-    ...currentOptions,
-    customPages: [
-      ...(currentOptions?.customPages ?? []),
-      newCustomPage,
-    ]
-  })
-}
+  // Custom <OrganizationProfile /> pages can be added inside
+  // the <OrganizationSwitcher /> component.
+  if (component === 'organization-switcher') {
+    clerkComponentMap.set(safeId, {
+      ...currentOptions,
+      organizationProfileProps: {
+        ...currentOptions.organizationProfileProps,
+        customPages: [...(currentOptions?.organizationProfileProps?.customPages ?? []), newCustomPage],
+      },
+    });
+  } else {
+    clerkComponentMap.set(safeId, {
+      ...currentOptions,
+      customPages: [...(currentOptions?.customPages ?? []), newCustomPage],
+    });
+  }
 </script>
diff --git a/packages/astro/src/astro-components/interactive/GoogleOneTap.astro b/packages/astro/src/astro-components/interactive/GoogleOneTap.astro
index e161a232ca5..d7913bdf5d0 100644
--- a/packages/astro/src/astro-components/interactive/GoogleOneTap.astro
+++ b/packages/astro/src/astro-components/interactive/GoogleOneTap.astro
@@ -1,8 +1,11 @@
 ---
-import type { GoogleOneTapProps } from "@clerk/types";
-type Props = GoogleOneTapProps
+import type { GoogleOneTapProps } from '@clerk/types';
+type Props = GoogleOneTapProps;
 
-import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
+import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro';
 ---
 
-<InternalUIComponentRenderer {...Astro.props} component="google-one-tap" />
+<InternalUIComponentRenderer
+  {...Astro.props}
+  component='google-one-tap'
+/>
diff --git a/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro b/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro
index ca3f561bbfe..19b3108666c 100644
--- a/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro
+++ b/packages/astro/src/astro-components/interactive/InternalUIComponentRenderer.astro
@@ -5,7 +5,7 @@ import type { InternalUIComponentId } from '../../types';
 interface Props {
   [key: string]: unknown;
   id?: string;
-  component: InternalUIComponentId
+  component: InternalUIComponentId;
 }
 
 const { component, id, ...props } = Astro.props;
diff --git a/packages/astro/src/astro-components/interactive/OrganizationList.astro b/packages/astro/src/astro-components/interactive/OrganizationList.astro
index d5515f6c66a..27d2d77ab5e 100644
--- a/packages/astro/src/astro-components/interactive/OrganizationList.astro
+++ b/packages/astro/src/astro-components/interactive/OrganizationList.astro
@@ -1,8 +1,11 @@
 ---
-import type { OrganizationListProps } from "@clerk/types";
-type Props = OrganizationListProps
+import type { OrganizationListProps } from '@clerk/types';
+type Props = OrganizationListProps;
 
-import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
+import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro';
 ---
 
-<InternalUIComponentRenderer {...Astro.props} component="organization-list" />
+<InternalUIComponentRenderer
+  {...Astro.props}
+  component='organization-list'
+/>
diff --git a/packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfile.astro b/packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfile.astro
index 759c9584ca9..6f326185431 100644
--- a/packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfile.astro
+++ b/packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfile.astro
@@ -1,10 +1,13 @@
 ---
-import type { OrganizationProfileProps, Without } from '@clerk/types'
+import type { OrganizationProfileProps, Without } from '@clerk/types';
 
-type Props = Without<OrganizationProfileProps, 'customPages'>
+type Props = Without<OrganizationProfileProps, 'customPages'>;
 
-import InternalUIComponentRenderer from '../InternalUIComponentRenderer.astro'
+import InternalUIComponentRenderer from '../InternalUIComponentRenderer.astro';
 ---
 
-<InternalUIComponentRenderer {...Astro.props} component="organization-profile" />
+<InternalUIComponentRenderer
+  {...Astro.props}
+  component='organization-profile'
+/>
 <slot />
diff --git a/packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfileLink.astro b/packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfileLink.astro
index 3f1280adcff..2e9a526659d 100644
--- a/packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfileLink.astro
+++ b/packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfileLink.astro
@@ -1,14 +1,22 @@
 ---
-import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro';
 
 interface Props {
-  url: string
-  label: string
+  url: string;
+  label: string;
 }
 
-const { url, label } = Astro.props
+const { url, label } = Astro.props;
 ---
 
-<CustomProfilePageRenderer label={label} url={url} type="link" component="organization-profile">
-    <slot name="label-icon" slot="label-icon" />
+<CustomProfilePageRenderer
+  label={label}
+  url={url}
+  type='link'
+  component='organization-profile'
+>
+  <slot
+    name='label-icon'
+    slot='label-icon'
+  />
 </CustomProfilePageRenderer>
diff --git a/packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfilePage.astro b/packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfilePage.astro
index 8b919a6aa35..46375df4686 100644
--- a/packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfilePage.astro
+++ b/packages/astro/src/astro-components/interactive/OrganizationProfile/OrganizationProfilePage.astro
@@ -1,24 +1,32 @@
 ---
-import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro';
 
 const reorderItemsLabels = ['general', 'members'] as const;
-type ReorderItemsLabels = typeof reorderItemsLabels[number];
+type ReorderItemsLabels = (typeof reorderItemsLabels)[number];
 
 type Props<Label extends string> = {
-  label: Label
+  label: Label;
 } & (Label extends ReorderItemsLabels
   ? {
-      url?: string
+      url?: string;
     }
   : {
-    url: string
-  }
-)
+      url: string;
+    });
 
-const { url, label } = Astro.props
+const { url, label } = Astro.props;
 ---
 
-<CustomProfilePageRenderer label={label} url={url} type="page" component="organization-profile" reorderItemsLabels={reorderItemsLabels}>
-    <slot name="label-icon" slot="label-icon" />
-    <slot />
+<CustomProfilePageRenderer
+  label={label}
+  url={url}
+  type='page'
+  component='organization-profile'
+  reorderItemsLabels={reorderItemsLabels}
+>
+  <slot
+    name='label-icon'
+    slot='label-icon'
+  />
+  <slot />
 </CustomProfilePageRenderer>
diff --git a/packages/astro/src/astro-components/interactive/OrganizationSwitcher.astro b/packages/astro/src/astro-components/interactive/OrganizationSwitcher.astro
index 1a5cab8e11e..151ff776183 100644
--- a/packages/astro/src/astro-components/interactive/OrganizationSwitcher.astro
+++ b/packages/astro/src/astro-components/interactive/OrganizationSwitcher.astro
@@ -1,8 +1,11 @@
 ---
-import type { OrganizationSwitcherProps } from "@clerk/types";
-type Props = OrganizationSwitcherProps
+import type { OrganizationSwitcherProps } from '@clerk/types';
+type Props = OrganizationSwitcherProps;
 
-import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
+import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro';
 ---
 
-<InternalUIComponentRenderer {...Astro.props} component="organization-switcher" />
+<InternalUIComponentRenderer
+  {...Astro.props}
+  component='organization-switcher'
+/>
diff --git a/packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationProfileLink.astro b/packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationProfileLink.astro
index ac7beb681c4..32bee50d6bf 100644
--- a/packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationProfileLink.astro
+++ b/packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationProfileLink.astro
@@ -1,14 +1,22 @@
 ---
-import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro';
 
 interface Props {
-  url: string
-  label: string
+  url: string;
+  label: string;
 }
 
-const { url, label } = Astro.props
+const { url, label } = Astro.props;
 ---
 
-<CustomProfilePageRenderer label={label} url={url} type="link" component="organization-switcher">
-    <slot name="label-icon" slot="label-icon" />
+<CustomProfilePageRenderer
+  label={label}
+  url={url}
+  type='link'
+  component='organization-switcher'
+>
+  <slot
+    name='label-icon'
+    slot='label-icon'
+  />
 </CustomProfilePageRenderer>
diff --git a/packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationProfilePage.astro b/packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationProfilePage.astro
index 3faa7e5784d..f8a4bac5973 100644
--- a/packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationProfilePage.astro
+++ b/packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationProfilePage.astro
@@ -1,24 +1,32 @@
 ---
-import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro';
 
 const reorderItemsLabels = ['general', 'members'] as const;
-type ReorderItemsLabels = typeof reorderItemsLabels[number];
+type ReorderItemsLabels = (typeof reorderItemsLabels)[number];
 
 type Props<Label extends string> = {
-  label: Label
+  label: Label;
 } & (Label extends ReorderItemsLabels
   ? {
-      url?: string
+      url?: string;
     }
   : {
-    url: string
-  }
-)
+      url: string;
+    });
 
-const { url, label } = Astro.props
+const { url, label } = Astro.props;
 ---
 
-<CustomProfilePageRenderer label={label} url={url} type="page" component="organization-switcher" reorderItemsLabels={reorderItemsLabels}>
-    <slot name="label-icon" slot="label-icon" />
-    <slot />
+<CustomProfilePageRenderer
+  label={label}
+  url={url}
+  type='page'
+  component='organization-switcher'
+  reorderItemsLabels={reorderItemsLabels}
+>
+  <slot
+    name='label-icon'
+    slot='label-icon'
+  />
+  <slot />
 </CustomProfilePageRenderer>
diff --git a/packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationSwitcher.astro b/packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationSwitcher.astro
index 8b6f9e90c1c..a021d891607 100644
--- a/packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationSwitcher.astro
+++ b/packages/astro/src/astro-components/interactive/OrganizationSwitcher/OrganizationSwitcher.astro
@@ -1,12 +1,15 @@
 ---
-import type { OrganizationProfileProps, OrganizationSwitcherProps, Without } from '@clerk/types'
+import type { OrganizationProfileProps, OrganizationSwitcherProps, Without } from '@clerk/types';
 
 type Props = Without<OrganizationSwitcherProps, 'organizationProfileProps'> & {
-  organizationProfileProps?: Pick<OrganizationProfileProps, 'appearance'>
-}
+  organizationProfileProps?: Pick<OrganizationProfileProps, 'appearance'>;
+};
 
-import InternalUIComponentRenderer from '../InternalUIComponentRenderer.astro'
+import InternalUIComponentRenderer from '../InternalUIComponentRenderer.astro';
 ---
 
-<InternalUIComponentRenderer {...Astro.props} component="organization-switcher" />
+<InternalUIComponentRenderer
+  {...Astro.props}
+  component='organization-switcher'
+/>
 <slot />
diff --git a/packages/astro/src/astro-components/interactive/PricingTable.astro b/packages/astro/src/astro-components/interactive/PricingTable.astro
index ddb4b7ecdcb..e571891eaf4 100644
--- a/packages/astro/src/astro-components/interactive/PricingTable.astro
+++ b/packages/astro/src/astro-components/interactive/PricingTable.astro
@@ -1,8 +1,11 @@
 ---
-import type { PricingTableProps } from "@clerk/types";
-type Props = PricingTableProps
+import type { PricingTableProps } from '@clerk/types';
+type Props = PricingTableProps;
 
-import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
+import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro';
 ---
 
-<InternalUIComponentRenderer {...Astro.props} component="pricing-table" />
+<InternalUIComponentRenderer
+  {...Astro.props}
+  component='pricing-table'
+/>
diff --git a/packages/astro/src/astro-components/interactive/SignIn.astro b/packages/astro/src/astro-components/interactive/SignIn.astro
index e4e2ab869f8..9c7baf2e6c4 100644
--- a/packages/astro/src/astro-components/interactive/SignIn.astro
+++ b/packages/astro/src/astro-components/interactive/SignIn.astro
@@ -1,8 +1,11 @@
 ---
-import type { SignInProps } from "@clerk/types";
-type Props = SignInProps
+import type { SignInProps } from '@clerk/types';
+type Props = SignInProps;
 
-import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
+import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro';
 ---
 
-<InternalUIComponentRenderer {...Astro.props} component="sign-in" />
+<InternalUIComponentRenderer
+  {...Astro.props}
+  component='sign-in'
+/>
diff --git a/packages/astro/src/astro-components/interactive/SignUp.astro b/packages/astro/src/astro-components/interactive/SignUp.astro
index 50eaa548511..7f97f7d034c 100644
--- a/packages/astro/src/astro-components/interactive/SignUp.astro
+++ b/packages/astro/src/astro-components/interactive/SignUp.astro
@@ -1,8 +1,11 @@
 ---
-import type { SignUpProps } from "@clerk/types";
-type Props = SignUpProps
+import type { SignUpProps } from '@clerk/types';
+type Props = SignUpProps;
 
-import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
+import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro';
 ---
 
-<InternalUIComponentRenderer {...Astro.props} component="sign-up" />
+<InternalUIComponentRenderer
+  {...Astro.props}
+  component='sign-up'
+/>
diff --git a/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro b/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
index e15f594b0d7..f86f5d1d679 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/MenuItemRenderer.astro
@@ -1,13 +1,13 @@
 ---
 type Props = {
-  label: string
-  href?: string
-  open?: string
-  clickIdentifier?: string
-  parent?: string
-}
+  label: string;
+  href?: string;
+  open?: string;
+  clickIdentifier?: string;
+  parent?: string;
+};
 
-const { label, href, open, clickIdentifier, parent } = Astro.props
+const { label, href, open, clickIdentifier, parent } = Astro.props;
 
 let labelIcon = '';
 
@@ -19,65 +19,64 @@ const isDevMode = import.meta.env.DEV;
 ---
 
 <script is:inline define:vars={{ label, href, open, clickIdentifier, labelIcon, isDevMode, parent }}>
-const parentElement = document.currentScript.parentElement;
+  const parentElement = document.currentScript.parentElement;
 
-// We used a web component in the `<UserButton.MenuItems>` component.
-const hasParentMenuItem = parentElement.tagName.toLowerCase() === 'clerk-user-button-menu-items';
-if (!hasParentMenuItem) {
-  if (isDevMode) {
-    throw new Error(
-      `Clerk: <UserButton.MenuItems /> component can only accept <UserButton.Action /> and <UserButton.Link /> as its children. Any other provided component will be ignored.`
-    );
+  // We used a web component in the `<UserButton.MenuItems>` component.
+  const hasParentMenuItem = parentElement.tagName.toLowerCase() === 'clerk-user-button-menu-items';
+  if (!hasParentMenuItem) {
+    if (isDevMode) {
+      throw new Error(
+        `Clerk: <UserButton.MenuItems /> component can only accept <UserButton.Action /> and <UserButton.Link /> as its children. Any other provided component will be ignored.`,
+      );
+    }
+    return;
   }
-  return
-}
 
-// Get the user button map from window that we set in the `<InternalUIComponentRenderer />`.
-const userButtonComponentMap = window.__astro_clerk_component_props.get('user-button');
+  // Get the user button map from window that we set in the `<InternalUIComponentRenderer />`.
+  const userButtonComponentMap = window.__astro_clerk_component_props.get('user-button');
 
-let userButton
-if (parent) {
-  userButton = document.querySelector(`[data-clerk-id="clerk-user-button-${parent}"]`);
-} else {
-  userButton = document.querySelector('[data-clerk-id^="clerk-user-button"]');
-}
+  let userButton;
+  if (parent) {
+    userButton = document.querySelector(`[data-clerk-id="clerk-user-button-${parent}"]`);
+  } else {
+    userButton = document.querySelector('[data-clerk-id^="clerk-user-button"]');
+  }
 
-const safeId = userButton.getAttribute('data-clerk-id');
-const currentOptions = userButtonComponentMap.get(safeId);
+  const safeId = userButton.getAttribute('data-clerk-id');
+  const currentOptions = userButtonComponentMap.get(safeId);
 
-const reorderItemsLabels = ['manageAccount', 'signOut'];
-const isReorderItem = reorderItemsLabels.includes(label);
+  const reorderItemsLabels = ['manageAccount', 'signOut'];
+  const isReorderItem = reorderItemsLabels.includes(label);
 
-let newMenuItem = {
-  label,
-}
+  let newMenuItem = {
+    label,
+  };
 
-if (!isReorderItem) {
-  newMenuItem = {
-    ...newMenuItem,
-    mountIcon: (el) => {
-      el.innerHTML = labelIcon
-    },
-    unmountIcon: () => { /* What to clean up? */}
-  }
+  if (!isReorderItem) {
+    newMenuItem = {
+      ...newMenuItem,
+      mountIcon: el => {
+        el.innerHTML = labelIcon;
+      },
+      unmountIcon: () => {
+        /* What to clean up? */
+      },
+    };
 
-  if (href) {
-    newMenuItem.href = href;
-  } else if (open) {
-    newMenuItem.open = open.startsWith('/') ? open : `/${open}`;
-  } else if (clickIdentifier) {
-    const clickEvent = new CustomEvent('clerk:menu-item-click', { detail: clickIdentifier });
-    newMenuItem.onClick = () => {
-      document.dispatchEvent(clickEvent);
+    if (href) {
+      newMenuItem.href = href;
+    } else if (open) {
+      newMenuItem.open = open.startsWith('/') ? open : `/${open}`;
+    } else if (clickIdentifier) {
+      const clickEvent = new CustomEvent('clerk:menu-item-click', { detail: clickIdentifier });
+      newMenuItem.onClick = () => {
+        document.dispatchEvent(clickEvent);
+      };
     }
   }
-}
 
-userButtonComponentMap.set(safeId, {
-  ...currentOptions,
-  customMenuItems: [
-    ...(currentOptions?.customMenuItems ?? []),
-    newMenuItem,
-  ]
-})
+  userButtonComponentMap.set(safeId, {
+    ...currentOptions,
+    customMenuItems: [...(currentOptions?.customMenuItems ?? []), newMenuItem],
+  });
 </script>
diff --git a/packages/astro/src/astro-components/interactive/UserButton/UserButton.astro b/packages/astro/src/astro-components/interactive/UserButton/UserButton.astro
index 669e35aa04a..5627e6d9dde 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/UserButton.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/UserButton.astro
@@ -1,5 +1,5 @@
 ---
-import type { UserButtonProps, UserProfileProps, Without } from "@clerk/types";
+import type { UserButtonProps, UserProfileProps, Without } from '@clerk/types';
 
 type Props = Without<UserButtonProps, 'userProfileProps'> & {
   userProfileProps?: Pick<UserProfileProps, 'additionalOAuthScopes' | 'appearance'>;
@@ -19,11 +19,14 @@ type Props = Without<UserButtonProps, 'userProfileProps'> & {
    * ```
    */
   id?: string;
-}
+};
 
-import InternalUIComponentRenderer from '../InternalUIComponentRenderer.astro'
+import InternalUIComponentRenderer from '../InternalUIComponentRenderer.astro';
 ---
 
-<InternalUIComponentRenderer {...Astro.props} component="user-button" />
+<InternalUIComponentRenderer
+  {...Astro.props}
+  component='user-button'
+/>
 
 <slot />
diff --git a/packages/astro/src/astro-components/interactive/UserButton/UserButtonAction.astro b/packages/astro/src/astro-components/interactive/UserButton/UserButtonAction.astro
index d95566d3038..7015bc859c7 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/UserButtonAction.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/UserButtonAction.astro
@@ -1,24 +1,28 @@
 ---
 import MenuItemRenderer from './MenuItemRenderer.astro';
 
-type ReorderItemsLabels = 'manageAccount' | 'signOut'
+type ReorderItemsLabels = 'manageAccount' | 'signOut';
 
 type Props<Label extends string> = {
-  label: Label
-  parent?: string
+  label: Label;
+  parent?: string;
 } & (Label extends ReorderItemsLabels
   ? {
-      open?: string
+      open?: string;
     }
-  : (
-      | { open: string; clickIdentifier?: string }
-      | { open?: string; clickIdentifier: string }
-    )
-)
+  : { open: string; clickIdentifier?: string } | { open?: string; clickIdentifier: string });
 
-const { label, open, clickIdentifier, parent } = Astro.props
+const { label, open, clickIdentifier, parent } = Astro.props;
 ---
 
-<MenuItemRenderer label={label} open={open} clickIdentifier={clickIdentifier} parent={parent}>
-  <slot name="label-icon" slot="label-icon" />
+<MenuItemRenderer
+  label={label}
+  open={open}
+  clickIdentifier={clickIdentifier}
+  parent={parent}
+>
+  <slot
+    name='label-icon'
+    slot='label-icon'
+  />
 </MenuItemRenderer>
diff --git a/packages/astro/src/astro-components/interactive/UserButton/UserButtonLink.astro b/packages/astro/src/astro-components/interactive/UserButton/UserButtonLink.astro
index 24d0faa4955..917f33abc49 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/UserButtonLink.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/UserButtonLink.astro
@@ -2,14 +2,21 @@
 import MenuItemRenderer from './MenuItemRenderer.astro';
 
 interface Props {
-  label: string
-  href: string
-  parent?: string
+  label: string;
+  href: string;
+  parent?: string;
 }
 
-const { label, href, parent } = Astro.props
+const { label, href, parent } = Astro.props;
 ---
 
-<MenuItemRenderer label={label} href={href} parent={parent}>
-    <slot name="label-icon" slot="label-icon" />
+<MenuItemRenderer
+  label={label}
+  href={href}
+  parent={parent}
+>
+  <slot
+    name='label-icon'
+    slot='label-icon'
+  />
 </MenuItemRenderer>
diff --git a/packages/astro/src/astro-components/interactive/UserButton/UserButtonMenuItems.astro b/packages/astro/src/astro-components/interactive/UserButton/UserButtonMenuItems.astro
index 41aeec7e576..a1f79ae6053 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/UserButtonMenuItems.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/UserButtonMenuItems.astro
@@ -1,18 +1,18 @@
 <clerk-user-button-menu-items>
- <slot />
+  <slot />
 </clerk-user-button-menu-items>
 
 <script>
-/**
- * In the React version, menu items need to be wrapped in a `<UserButton.MenuItems>` component.
- * We are trying to replicate that behavior here by adding a wrapper component
- * and check if it exists inside the menu items components.
- */
-class ClerkUserButtonMenuItems extends HTMLElement {
-  constructor() {
-    super();
+  /**
+   * In the React version, menu items need to be wrapped in a `<UserButton.MenuItems>` component.
+   * We are trying to replicate that behavior here by adding a wrapper component
+   * and check if it exists inside the menu items components.
+   */
+  class ClerkUserButtonMenuItems extends HTMLElement {
+    constructor() {
+      super();
+    }
   }
-}
 
-customElements.define('clerk-user-button-menu-items', ClerkUserButtonMenuItems);
+  customElements.define('clerk-user-button-menu-items', ClerkUserButtonMenuItems);
 </script>
diff --git a/packages/astro/src/astro-components/interactive/UserButton/UserButtonUserProfilePage.astro b/packages/astro/src/astro-components/interactive/UserButton/UserButtonUserProfilePage.astro
index 81284108b3c..568fed7baf8 100644
--- a/packages/astro/src/astro-components/interactive/UserButton/UserButtonUserProfilePage.astro
+++ b/packages/astro/src/astro-components/interactive/UserButton/UserButtonUserProfilePage.astro
@@ -1,14 +1,14 @@
 ---
 interface Props {
-  url: string
-  label: string
-  parent?: string
+  url: string;
+  label: string;
+  parent?: string;
 }
 
-const { url, label, parent } = Astro.props
+const { url, label, parent } = Astro.props;
 
 let labelIcon = '';
-let content = ''
+let content = '';
 
 if (Astro.slots.has('label-icon')) {
   labelIcon = await Astro.slots.render('label-icon');
@@ -20,39 +20,40 @@ if (Astro.slots.has('default')) {
 ---
 
 <script is:inline define:vars={{ url, label, content, labelIcon, parent }}>
-// Get the user button map from window that we set in the `<InternalUIComponentRenderer />`.
-const userButtonComponentMap = window.__astro_clerk_component_props.get('user-button');
-
-let userButton
-if (parent) {
-  userButton = document.querySelector(`[data-clerk-id="clerk-user-button-${parent}"]`);
-} else {
-  userButton = document.querySelector('[data-clerk-id^="clerk-user-button"]');
-}
-
-const safeId = userButton.getAttribute('data-clerk-id');
-const currentOptions = userButtonComponentMap.get(safeId);
-
-const newCustomPage = {
-  label,
-  url,
-  mountIcon: (el) => {
-    el.innerHTML = labelIcon
-  },
-  unmountIcon: () => { /* What to clean up? */},
-  mount: (el) => {
-    el.innerHTML = content
-  },
-  unmount: () => { /* What to clean up? */},
-}
-
-userButtonComponentMap.set(safeId, {
-  ...currentOptions,
-  userProfileProps: {
-    customPages: [
-      ...(currentOptions?.userProfileProps?.customPages ?? []),
-      newCustomPage,
-    ]
+  // Get the user button map from window that we set in the `<InternalUIComponentRenderer />`.
+  const userButtonComponentMap = window.__astro_clerk_component_props.get('user-button');
+
+  let userButton;
+  if (parent) {
+    userButton = document.querySelector(`[data-clerk-id="clerk-user-button-${parent}"]`);
+  } else {
+    userButton = document.querySelector('[data-clerk-id^="clerk-user-button"]');
   }
-})
+
+  const safeId = userButton.getAttribute('data-clerk-id');
+  const currentOptions = userButtonComponentMap.get(safeId);
+
+  const newCustomPage = {
+    label,
+    url,
+    mountIcon: el => {
+      el.innerHTML = labelIcon;
+    },
+    unmountIcon: () => {
+      /* What to clean up? */
+    },
+    mount: el => {
+      el.innerHTML = content;
+    },
+    unmount: () => {
+      /* What to clean up? */
+    },
+  };
+
+  userButtonComponentMap.set(safeId, {
+    ...currentOptions,
+    userProfileProps: {
+      customPages: [...(currentOptions?.userProfileProps?.customPages ?? []), newCustomPage],
+    },
+  });
 </script>
diff --git a/packages/astro/src/astro-components/interactive/UserProfile/UserProfile.astro b/packages/astro/src/astro-components/interactive/UserProfile/UserProfile.astro
index e9e3cfef6cb..cb4e5db312d 100644
--- a/packages/astro/src/astro-components/interactive/UserProfile/UserProfile.astro
+++ b/packages/astro/src/astro-components/interactive/UserProfile/UserProfile.astro
@@ -1,10 +1,13 @@
 ---
-import type { UserProfileProps, Without } from '@clerk/types'
+import type { UserProfileProps, Without } from '@clerk/types';
 
-type Props = Without<UserProfileProps, 'customPages'>
+type Props = Without<UserProfileProps, 'customPages'>;
 
-import InternalUIComponentRenderer from '../InternalUIComponentRenderer.astro'
+import InternalUIComponentRenderer from '../InternalUIComponentRenderer.astro';
 ---
 
-<InternalUIComponentRenderer {...Astro.props} component="user-profile" />
+<InternalUIComponentRenderer
+  {...Astro.props}
+  component='user-profile'
+/>
 <slot />
diff --git a/packages/astro/src/astro-components/interactive/UserProfile/UserProfileLink.astro b/packages/astro/src/astro-components/interactive/UserProfile/UserProfileLink.astro
index dfe7329c8ab..b10ed018c78 100644
--- a/packages/astro/src/astro-components/interactive/UserProfile/UserProfileLink.astro
+++ b/packages/astro/src/astro-components/interactive/UserProfile/UserProfileLink.astro
@@ -1,14 +1,22 @@
 ---
-import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro';
 
 interface Props {
-  url: string
-  label: string
+  url: string;
+  label: string;
 }
 
-const { url, label } = Astro.props
+const { url, label } = Astro.props;
 ---
 
-<CustomProfilePageRenderer label={label} url={url} type="link" component="user-profile">
-    <slot name="label-icon" slot="label-icon" />
+<CustomProfilePageRenderer
+  label={label}
+  url={url}
+  type='link'
+  component='user-profile'
+>
+  <slot
+    name='label-icon'
+    slot='label-icon'
+  />
 </CustomProfilePageRenderer>
diff --git a/packages/astro/src/astro-components/interactive/UserProfile/UserProfilePage.astro b/packages/astro/src/astro-components/interactive/UserProfile/UserProfilePage.astro
index 38bdc0e7891..f08e16d6dcd 100644
--- a/packages/astro/src/astro-components/interactive/UserProfile/UserProfilePage.astro
+++ b/packages/astro/src/astro-components/interactive/UserProfile/UserProfilePage.astro
@@ -1,24 +1,32 @@
 ---
-import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro'
+import CustomProfilePageRenderer from '../CustomProfilePageRenderer.astro';
 
 const reorderItemsLabels = ['account', 'security'] as const;
-type ReorderItemsLabels = typeof reorderItemsLabels[number];
+type ReorderItemsLabels = (typeof reorderItemsLabels)[number];
 
 type Props<Label extends string> = {
-  label: Label
+  label: Label;
 } & (Label extends ReorderItemsLabels
   ? {
-      url?: string
+      url?: string;
     }
   : {
-    url: string
-  }
-)
+      url: string;
+    });
 
-const { url, label } = Astro.props
+const { url, label } = Astro.props;
 ---
 
-<CustomProfilePageRenderer label={label} url={url} type="page" component="user-profile" reorderItemsLabels={reorderItemsLabels}>
-    <slot name="label-icon" slot="label-icon" />
-    <slot />
+<CustomProfilePageRenderer
+  label={label}
+  url={url}
+  type='page'
+  component='user-profile'
+  reorderItemsLabels={reorderItemsLabels}
+>
+  <slot
+    name='label-icon'
+    slot='label-icon'
+  />
+  <slot />
 </CustomProfilePageRenderer>
diff --git a/packages/astro/src/astro-components/interactive/Waitlist.astro b/packages/astro/src/astro-components/interactive/Waitlist.astro
index cfbcbb6bdc4..79dd402ebba 100644
--- a/packages/astro/src/astro-components/interactive/Waitlist.astro
+++ b/packages/astro/src/astro-components/interactive/Waitlist.astro
@@ -1,8 +1,11 @@
 ---
-import type { WaitlistProps } from "@clerk/types";
-type Props = WaitlistProps
+import type { WaitlistProps } from '@clerk/types';
+type Props = WaitlistProps;
 
-import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro'
+import InternalUIComponentRenderer from './InternalUIComponentRenderer.astro';
 ---
 
-<InternalUIComponentRenderer {...Astro.props} component="waitlist" />
+<InternalUIComponentRenderer
+  {...Astro.props}
+  component='waitlist'
+/>
diff --git a/packages/astro/src/astro-components/unstyled/SignInButton.astro b/packages/astro/src/astro-components/unstyled/SignInButton.astro
index ed95f51168b..479b6388041 100644
--- a/packages/astro/src/astro-components/unstyled/SignInButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignInButton.astro
@@ -1,8 +1,8 @@
 ---
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import type { SignInButtonProps } from '@clerk/types'
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { SignInButtonProps } from '@clerk/types';
 import type { ButtonProps } from '../../types';
-import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils'
+import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
 
 type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> & SignInButtonProps;
 
@@ -11,7 +11,7 @@ import { generateSafeId } from '@clerk/astro/internal';
 const safeId = generateSafeId();
 
 if ('as' in Astro.props) {
-  logAsPropUsageDeprecation()
+  logAsPropUsageDeprecation();
 }
 
 const {
@@ -23,7 +23,7 @@ const {
   signUpForceRedirectUrl,
   mode,
   ...props
-} = Astro.props
+} = Astro.props;
 
 const signInOptions = {
   forceRedirectUrl,
@@ -32,11 +32,11 @@ const signInOptions = {
   signUpForceRedirectUrl,
 };
 
-let htmlElement = ''
+let htmlElement = '';
 
 if (asChild) {
-  htmlElement = await Astro.slots.render('default')
-  htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId)
+  htmlElement = await Astro.slots.render('default');
+  htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
 }
 ---
 
@@ -44,17 +44,20 @@ if (asChild) {
   asChild ? (
     <Fragment set:html={htmlElement} />
   ) : (
-    <Tag {...props} data-clerk-unstyled-id={safeId}>
+    <Tag
+      {...props}
+      data-clerk-unstyled-id={safeId}
+    >
       <slot>Sign in</slot>
-    </Tag >
+    </Tag>
   )
 }
 
 <script is:inline define:vars={{ props, signInOptions, mode, safeId }}>
   const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
 
-  btn.addEventListener("click", () => {
-    const clerk = window.Clerk
+  btn.addEventListener('click', () => {
+    const clerk = window.Clerk;
 
     if (mode === 'modal') {
       return clerk.openSignIn({ ...signInOptions, appearance: props.appearance });
diff --git a/packages/astro/src/astro-components/unstyled/SignOutButton.astro b/packages/astro/src/astro-components/unstyled/SignOutButton.astro
index b855ed37fc3..9428889c9d0 100644
--- a/packages/astro/src/astro-components/unstyled/SignOutButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignOutButton.astro
@@ -1,32 +1,26 @@
 ---
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import type { SignOutOptions, Without } from '@clerk/types'
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { SignOutOptions, Without } from '@clerk/types';
 import type { ButtonProps } from '../../types';
-import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils'
+import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
 
-type Props<Tag extends HTMLTag = 'button'> = Polymorphic<SignOutOptions & ButtonProps<Tag>>
+type Props<Tag extends HTMLTag = 'button'> = Polymorphic<SignOutOptions & ButtonProps<Tag>>;
 
-import { generateSafeId } from '@clerk/astro/internal'
+import { generateSafeId } from '@clerk/astro/internal';
 
 const safeId = generateSafeId();
 
 if ('as' in Astro.props) {
-  logAsPropUsageDeprecation()
+  logAsPropUsageDeprecation();
 }
 
-const {
-  as: Tag = 'button',
-  asChild,
-  redirectUrl = '/',
-  sessionId,
-  ...elementProps
-} = Astro.props
+const { as: Tag = 'button', asChild, redirectUrl = '/', sessionId, ...elementProps } = Astro.props;
 
-let htmlElement = ''
+let htmlElement = '';
 
 if (asChild) {
-  htmlElement = await Astro.slots.render('default')
-  htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId)
+  htmlElement = await Astro.slots.render('default');
+  htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
 }
 ---
 
@@ -34,16 +28,19 @@ if (asChild) {
   asChild ? (
     <Fragment set:html={htmlElement} />
   ) : (
-    <Tag {...elementProps} data-clerk-unstyled-id={safeId}>
+    <Tag
+      {...elementProps}
+      data-clerk-unstyled-id={safeId}
+    >
       <slot>Sign out</slot>
-    </Tag >
+    </Tag>
   )
 }
 
 <script is:inline define:vars={{ redirectUrl, sessionId, safeId }}>
   const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
 
-  btn.addEventListener("click", () => {
-    window.Clerk.signOut({ redirectUrl, sessionId })
+  btn.addEventListener('click', () => {
+    window.Clerk.signOut({ redirectUrl, sessionId });
   });
 </script>
diff --git a/packages/astro/src/astro-components/unstyled/SignUpButton.astro b/packages/astro/src/astro-components/unstyled/SignUpButton.astro
index 3576892b1b8..2b4eef5244b 100644
--- a/packages/astro/src/astro-components/unstyled/SignUpButton.astro
+++ b/packages/astro/src/astro-components/unstyled/SignUpButton.astro
@@ -1,8 +1,8 @@
 ---
-import type { HTMLTag, Polymorphic } from 'astro/types'
-import type { SignUpButtonProps } from '@clerk/types'
-import type { ButtonProps } from '../../types'
-import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils'
+import type { HTMLTag, Polymorphic } from 'astro/types';
+import type { SignUpButtonProps } from '@clerk/types';
+import type { ButtonProps } from '../../types';
+import { addUnstyledAttributeToFirstTag, logAsPropUsageDeprecation } from './utils';
 
 type Props<Tag extends HTMLTag = 'button'> = Polymorphic<ButtonProps<Tag>> & SignUpButtonProps;
 
@@ -11,7 +11,7 @@ import { generateSafeId } from '@clerk/astro/internal';
 const safeId = generateSafeId();
 
 if ('as' in Astro.props) {
-  logAsPropUsageDeprecation()
+  logAsPropUsageDeprecation();
 }
 
 const {
@@ -24,7 +24,7 @@ const {
   mode,
   unsafeMetadata,
   ...props
-} = Astro.props
+} = Astro.props;
 
 const signUpOptions = {
   fallbackRedirectUrl,
@@ -32,13 +32,13 @@ const signUpOptions = {
   signInFallbackRedirectUrl,
   signInForceRedirectUrl,
   unsafeMetadata,
-}
+};
 
-let htmlElement = ''
+let htmlElement = '';
 
 if (asChild) {
-  htmlElement = await Astro.slots.render('default')
-  htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId)
+  htmlElement = await Astro.slots.render('default');
+  htmlElement = addUnstyledAttributeToFirstTag(htmlElement, safeId);
 }
 ---
 
@@ -46,17 +46,20 @@ if (asChild) {
   asChild ? (
     <Fragment set:html={htmlElement} />
   ) : (
-    <Tag {...props} data-clerk-unstyled-id={safeId}>
+    <Tag
+      {...props}
+      data-clerk-unstyled-id={safeId}
+    >
       <slot>Sign up</slot>
-    </Tag >
+    </Tag>
   )
 }
 
 <script is:inline define:vars={{ props, signUpOptions, mode, safeId }}>
   const btn = document.querySelector(`[data-clerk-unstyled-id="${safeId}"]`);
 
-  btn.addEventListener("click", () => {
-    const clerk = window.Clerk
+  btn.addEventListener('click', () => {
+    const clerk = window.Clerk;
 
     if (mode === 'modal') {
       return clerk.openSignUp({ ...signUpOptions, appearance: props.appearance });
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index f5b39334729..bb55e493cc9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -244,12 +244,15 @@ importers:
       prettier:
         specifier: ^3.5.3
         version: 3.5.3
+      prettier-plugin-astro:
+        specifier: ^0.14.1
+        version: 0.14.1
       prettier-plugin-packagejson:
         specifier: ^2.5.15
         version: 2.5.15(prettier@3.5.3)
       prettier-plugin-tailwindcss:
         specifier: ^0.6.12
-        version: 0.6.12(prettier@3.5.3)
+        version: 0.6.12(prettier-plugin-astro@0.14.1)(prettier@3.5.3)
       publint:
         specifier: ^0.3.12
         version: 0.3.12
@@ -11753,6 +11756,10 @@ packages:
     resolution: {integrity: sha512-ravE6m9Atw9Z/jjttRUZ+clIXogdghyZAuWJ3qEzjT+jI/dL1ifAqhZeC5VHzQp1MSt1+jxKkFNemj/iO7tVUA==}
     engines: {node: '>=4'}
 
+  prettier-plugin-astro@0.14.1:
+    resolution: {integrity: sha512-RiBETaaP9veVstE4vUwSIcdATj6dKmXljouXc/DDNwBSPTp8FRkLGDSGFClKsAFeeg+13SB0Z1JZvbD76bigJw==}
+    engines: {node: ^14.15.0 || >=16.0.0}
+
   prettier-plugin-packagejson@2.5.15:
     resolution: {integrity: sha512-2QSx6y4IT6LTwXtCvXAopENW5IP/aujC8fobEM2pDbs0IGkiVjW/ipPuYAHuXigbNe64aGWF7vIetukuzM3CBw==}
     peerDependencies:
@@ -12450,6 +12457,9 @@ packages:
   rxjs@7.8.1:
     resolution: {integrity: sha512-AA3TVj+0A2iuIoQkWEK/tqFjBq2j+6PO6Y0zJcvzLAFhEFIO3HL0vls9hWLncZbAAbK0mar7oZ4V079I/qPMxg==}
 
+  s.color@0.0.15:
+    resolution: {integrity: sha512-AUNrbEUHeKY8XsYr/DYpl+qk5+aM+DChopnWOPEzn8YKzOhv4l2zH6LzZms3tOZP3wwdOyc0RmTciyi46HLIuA==}
+
   sade@1.8.1:
     resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
     engines: {node: '>=6'}
@@ -12482,6 +12492,9 @@ packages:
   safer-buffer@2.1.2:
     resolution: {integrity: sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==}
 
+  sass-formatter@0.7.9:
+    resolution: {integrity: sha512-CWZ8XiSim+fJVG0cFLStwDvft1VI7uvXdCNJYXhDvowiv+DsbD1nXLiQ4zrE5UBvj5DWZJ93cwN0NX5PMsr1Pw==}
+
   sax@1.3.0:
     resolution: {integrity: sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==}
 
@@ -13109,6 +13122,9 @@ packages:
     resolution: {integrity: sha512-Mu7R0g4ig9TUuGSxJavny5Rv0egCEtpZRNMrZaYS1vxkiIxGiGUwoezU3LazIQ+KE04hTrTfNPgxU5gzi7F5Pw==}
     deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.
 
+  suf-log@2.5.3:
+    resolution: {integrity: sha512-KvC8OPjzdNOe+xQ4XWJV2whQA0aM1kGVczMQ8+dStAO6KfEB140JEVQ9dE76ONZ0/Ylf67ni4tILPJB41U0eow==}
+
   superagent@8.1.2:
     resolution: {integrity: sha512-6WTxW1EB6yCxV5VFOIPQruWGHqc3yI7hEmZK6h+pyk69Lk/Ut7rLUY6W/ONF2MjBuGjvmMiIpsrVJ2vjrHlslA==}
     engines: {node: '>=6.4.0 <13 || >=14'}
@@ -28409,6 +28425,12 @@ snapshots:
 
   prepend-http@2.0.0: {}
 
+  prettier-plugin-astro@0.14.1:
+    dependencies:
+      '@astrojs/compiler': 2.12.2
+      prettier: 3.5.3
+      sass-formatter: 0.7.9
+
   prettier-plugin-packagejson@2.5.15(prettier@3.5.3):
     dependencies:
       sort-package-json: 3.2.1
@@ -28416,9 +28438,11 @@ snapshots:
     optionalDependencies:
       prettier: 3.5.3
 
-  prettier-plugin-tailwindcss@0.6.12(prettier@3.5.3):
+  prettier-plugin-tailwindcss@0.6.12(prettier-plugin-astro@0.14.1)(prettier@3.5.3):
     dependencies:
       prettier: 3.5.3
+    optionalDependencies:
+      prettier-plugin-astro: 0.14.1
 
   prettier@2.8.8: {}
 
@@ -29168,6 +29192,8 @@ snapshots:
     dependencies:
       tslib: 2.8.1
 
+  s.color@0.0.15: {}
+
   sade@1.8.1:
     dependencies:
       mri: 1.2.0
@@ -29203,6 +29229,10 @@ snapshots:
 
   safer-buffer@2.1.2: {}
 
+  sass-formatter@0.7.9:
+    dependencies:
+      suf-log: 2.5.3
+
   sax@1.3.0: {}
 
   saxes@6.0.0:
@@ -29966,6 +29996,10 @@ snapshots:
   sudo-prompt@9.2.1:
     optional: true
 
+  suf-log@2.5.3:
+    dependencies:
+      s.color: 0.0.15
+
   superagent@8.1.2:
     dependencies:
       component-emitter: 1.3.1

From b9995c415429007fb3fa4441e2f78632c6a94759 Mon Sep 17 00:00:00 2001
From: Robert Soriano <sorianorobertc@gmail.com>
Date: Wed, 9 Jul 2025 16:27:08 -0700
Subject: [PATCH 2/2] chore: placeholder changeset

---
 .changeset/slow-apricots-tell.md | 2 ++
 1 file changed, 2 insertions(+)
 create mode 100644 .changeset/slow-apricots-tell.md

diff --git a/.changeset/slow-apricots-tell.md b/.changeset/slow-apricots-tell.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/slow-apricots-tell.md
@@ -0,0 +1,2 @@
+---
+---