From 967bdbe021ee3f6984c9b7442485808c5ed79911 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Wed, 19 Nov 2025 16:05:00 -0500
Subject: [PATCH 1/3] feat: animate height of switch

---
 .../EnableOrganizationsPrompt/index.tsx       | 40 ++++++++++++++-----
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
index e768b999b73..40cf05316d2 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
@@ -11,7 +11,7 @@ import { Modal } from '@/ui/elements/Modal';
 import { common, InternalThemeProvider } from '@/ui/styledSystem';
 
 import { DevTools } from '../../../../core/resources/DevTools';
-import { Flex, Span } from '../../../customizables';
+import { Box, Flex, Span } from '../../../customizables';
 import { Portal } from '../../../elements/Portal';
 import { basePromptElementStyles, handleDashboardUrlParsing, PromptContainer, PromptSuccessIcon } from '../shared';
 
@@ -291,15 +291,35 @@ const EnableOrganizationsPromptInternal = ({
               )}
             </Flex>
 
-            {!isEnabled && hasPersonalAccountsEnabled && (
-              <Flex sx={t => ({ marginTop: t.sizes.$3 })}>
-                <Switch
-                  label='Allow personal account'
-                  description='This is an uncommon setting, meant for applications that sell to both organizations and individual users. Most B2B applications require users to be part of an organization, and should keep this setting disabled.'
-                  checked={allowPersonalAccount}
-                  onChange={() => setAllowPersonalAccount(prev => !prev)}
-                />
-              </Flex>
+            {hasPersonalAccountsEnabled && (
+              <Box
+                sx={t => ({
+                  display: 'grid',
+                  gridTemplateRows: isEnabled ? '0fr' : '1fr',
+                  transition: `grid-template-rows ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`,
+                  marginInline: '-0.5rem',
+                  overflow: 'hidden',
+                })}
+                {...(isEnabled && { inert: '' })}
+              >
+                <Flex
+                  sx={t => ({
+                    minHeight: 0,
+                    paddingInline: '0.5rem',
+                    opacity: isEnabled ? 0 : 1,
+                    transition: `opacity ${t.transitionDuration.$slower} ${t.transitionTiming.$slowBezier}`,
+                  })}
+                >
+                  <Flex sx={t => ({ marginTop: t.sizes.$2 })}>
+                    <Switch
+                      label='Allow personal account'
+                      description='This is an uncommon setting, meant for applications that sell to both organizations and individual users. Most B2B applications require users to be part of an organization, and should keep this setting disabled.'
+                      checked={allowPersonalAccount}
+                      onChange={() => setAllowPersonalAccount(prev => !prev)}
+                    />
+                  </Flex>
+                </Flex>
+              </Box>
             )}
           </Flex>
 

From 23998ff6099dfb448a692133a409f321a14ba177 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 19 Nov 2025 13:47:09 -0800
Subject: [PATCH 2/3] Update
 packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx

---
 .../components/devPrompts/EnableOrganizationsPrompt/index.tsx   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
index 40cf05316d2..471afb67177 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
@@ -291,7 +291,7 @@ const EnableOrganizationsPromptInternal = ({
               )}
             </Flex>
 
-            {hasPersonalAccountsEnabled && (
+            {!isEnabled && hasPersonalAccountsEnabled && (
               <Box
                 sx={t => ({
                   display: 'grid',

From 90fe4537420c6cf9131042bf1db586be45a2fec1 Mon Sep 17 00:00:00 2001
From: Laura Beatris <48022589+LauraBeatris@users.noreply.github.com>
Date: Wed, 19 Nov 2025 19:15:09 -0300
Subject: [PATCH 3/3] Update copy per feedback

---
 .../components/devPrompts/EnableOrganizationsPrompt/index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
index 471afb67177..8af819b6a9e 100644
--- a/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
+++ b/packages/clerk-js/src/ui/components/devPrompts/EnableOrganizationsPrompt/index.tsx
@@ -291,7 +291,7 @@ const EnableOrganizationsPromptInternal = ({
               )}
             </Flex>
 
-            {!isEnabled && hasPersonalAccountsEnabled && (
+            {hasPersonalAccountsEnabled && (
               <Box
                 sx={t => ({
                   display: 'grid',
@@ -313,7 +313,7 @@ const EnableOrganizationsPromptInternal = ({
                   <Flex sx={t => ({ marginTop: t.sizes.$2 })}>
                     <Switch
                       label='Allow personal account'
-                      description='This is an uncommon setting, meant for applications that sell to both organizations and individual users. Most B2B applications require users to be part of an organization, and should keep this setting disabled.'
+                      description='Allow users to work outside of an organization by providing a personal account. We do not recommend for B2B SaaS apps.'
                       checked={allowPersonalAccount}
                       onChange={() => setAllowPersonalAccount(prev => !prev)}
                     />