From 07574007d34e14c57e93eceedc6698ef05f855a6 Mon Sep 17 00:00:00 2001
From: austincalvelage <austin.calvelage@icloud.com>
Date: Mon, 10 Aug 2026 11:25:17 -0600
Subject: [PATCH] feat(ui): add user profile delete section

---
 .changeset/user-profile-delete-section.md     |  2 ++
 .../swingset/src/components/DocsViewer.tsx    |  1 +
 packages/swingset/src/lib/registry.ts         |  9 +++++
 .../stories/user-profile-delete-section.mdx   | 14 ++++++++
 .../user-profile-delete-section.stories.tsx   | 17 +++++++++
 .../user-profile-delete-section.view.tsx      | 36 +++++++++++++++++++
 6 files changed, 79 insertions(+)
 create mode 100644 .changeset/user-profile-delete-section.md
 create mode 100644 packages/swingset/src/stories/user-profile-delete-section.mdx
 create mode 100644 packages/swingset/src/stories/user-profile-delete-section.stories.tsx
 create mode 100644 packages/ui/src/mosaic/user-profile/user-profile-delete-section.view.tsx

diff --git a/.changeset/user-profile-delete-section.md b/.changeset/user-profile-delete-section.md
new file mode 100644
index 00000000000..a845151cc84
--- /dev/null
+++ b/.changeset/user-profile-delete-section.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/packages/swingset/src/components/DocsViewer.tsx b/packages/swingset/src/components/DocsViewer.tsx
index ad75ce85935..7230f0b105f 100644
--- a/packages/swingset/src/components/DocsViewer.tsx
+++ b/packages/swingset/src/components/DocsViewer.tsx
@@ -17,6 +17,7 @@ const docModules: Record<string, Record<string, React.ComponentType>> = {
       () => import('../stories/user-profile-connected-accounts-section.mdx'),
     ),
     'user-profile-web3wallets-section': dynamic(() => import('../stories/user-profile-web3-wallets-section.mdx')),
+    'user-profile-delete-section': dynamic(() => import('../stories/user-profile-delete-section.mdx')),
   },
   organization: {
     'organization-profile': dynamic(() => import('../stories/organization-profile.mdx')),
diff --git a/packages/swingset/src/lib/registry.ts b/packages/swingset/src/lib/registry.ts
index 1aa923d8149..510fe5ebaa5 100644
--- a/packages/swingset/src/lib/registry.ts
+++ b/packages/swingset/src/lib/registry.ts
@@ -138,6 +138,10 @@ import {
   Default as UserProfileConnectedAccountsSectionDefault,
   meta as userProfileConnectedAccountsSectionMeta,
 } from '../stories/user-profile-connected-accounts-section.stories';
+import {
+  Default as UserProfileDeleteSectionDefault,
+  meta as userProfileDeleteSectionMeta,
+} from '../stories/user-profile-delete-section.stories';
 import {
   Default as UserProfileWeb3WalletsSectionDefault,
   meta as userProfileWeb3WalletsSectionMeta,
@@ -295,6 +299,10 @@ const userProfileWeb3WalletsSectionModule: StoryModule = {
   meta: userProfileWeb3WalletsSectionMeta,
   Default: UserProfileWeb3WalletsSectionDefault,
 };
+const userProfileDeleteSectionModule: StoryModule = {
+  meta: userProfileDeleteSectionMeta,
+  Default: UserProfileDeleteSectionDefault,
+};
 
 export const registry: StoryModule[] = [
   // User
@@ -302,6 +310,7 @@ export const registry: StoryModule[] = [
   userProfileAccountSectionModule,
   userProfileConnectedAccountsSectionModule,
   userProfileWeb3WalletsSectionModule,
+  userProfileDeleteSectionModule,
   // Organization
   organizationProfileModule,
   organizationProfileGeneralPanelModule,
diff --git a/packages/swingset/src/stories/user-profile-delete-section.mdx b/packages/swingset/src/stories/user-profile-delete-section.mdx
new file mode 100644
index 00000000000..e6ca07a140b
--- /dev/null
+++ b/packages/swingset/src/stories/user-profile-delete-section.mdx
@@ -0,0 +1,14 @@
+import * as Stories from './user-profile-delete-section.stories';
+
+# UserProfileDeleteSection
+
+The terminal destructive action for deleting the current user account.
+
+<Story
+  name='Default'
+  storyModule={Stories}
+  composition={[
+    { name: 'Section', href: '/components/section', layer: 'Components' },
+    { name: 'Button', href: '/components/button', layer: 'Components' },
+  ]}
+/>
diff --git a/packages/swingset/src/stories/user-profile-delete-section.stories.tsx b/packages/swingset/src/stories/user-profile-delete-section.stories.tsx
new file mode 100644
index 00000000000..f673f8cecee
--- /dev/null
+++ b/packages/swingset/src/stories/user-profile-delete-section.stories.tsx
@@ -0,0 +1,17 @@
+/** @jsxImportSource @emotion/react */
+import { UserProfileDeleteSectionView } from '@clerk/ui/mosaic/user-profile/user-profile-delete-section.view';
+
+import type { StoryMeta } from '@/lib/types';
+
+export { default as __source } from './user-profile-delete-section.stories?raw';
+
+export const meta: StoryMeta = {
+  group: 'User',
+  title: 'UserProfileDeleteSection',
+  source: 'packages/ui/src/mosaic/user-profile/user-profile-delete-section.view.tsx',
+  styleEngine: 'stylex',
+};
+
+export function Default() {
+  return <UserProfileDeleteSectionView onDelete={() => undefined} />;
+}
diff --git a/packages/ui/src/mosaic/user-profile/user-profile-delete-section.view.tsx b/packages/ui/src/mosaic/user-profile/user-profile-delete-section.view.tsx
new file mode 100644
index 00000000000..ba2e5cb5b6b
--- /dev/null
+++ b/packages/ui/src/mosaic/user-profile/user-profile-delete-section.view.tsx
@@ -0,0 +1,36 @@
+import { Button } from '../components/button';
+import { Section } from '../components/section';
+
+export interface UserProfileDeleteSectionViewProps {
+  onDelete: () => void;
+}
+
+export function UserProfileDeleteSectionView({ onDelete }: UserProfileDeleteSectionViewProps) {
+  return (
+    <Section.Root>
+      <Section.Title>Danger zone</Section.Title>
+      <Section.Group>
+        <Section.Row>
+          <Section.Item>
+            <Section.Content>
+              <Section.Label>Delete account</Section.Label>
+              <Section.Description>
+                Permanently delete this profile and all its data. This cannot be undone.
+              </Section.Description>
+            </Section.Content>
+            <Section.Actions>
+              <Button
+                color='negative'
+                size='sm'
+                variant='outline'
+                onClick={onDelete}
+              >
+                Delete account
+              </Button>
+            </Section.Actions>
+          </Section.Item>
+        </Section.Row>
+      </Section.Group>
+    </Section.Root>
+  );
+}