From 8b7232ba3bf7ad511624f6789071eef9d24b7368 Mon Sep 17 00:00:00 2001
From: Alex Carpenter <alex.carpenter@clerk.dev>
Date: Tue, 14 Jul 2026 09:22:22 -0400
Subject: [PATCH] fix(ui): Balance headings and prettify body text to reduce
 widows

---
 .changeset/text-wrap-widows.md         | 5 +++++
 packages/ui/src/primitives/Heading.tsx | 1 +
 packages/ui/src/primitives/Text.tsx    | 1 +
 3 files changed, 7 insertions(+)
 create mode 100644 .changeset/text-wrap-widows.md

diff --git a/.changeset/text-wrap-widows.md b/.changeset/text-wrap-widows.md
new file mode 100644
index 00000000000..f9bdf1a2373
--- /dev/null
+++ b/.changeset/text-wrap-widows.md
@@ -0,0 +1,5 @@
+---
+'@clerk/ui': patch
+---
+
+Headings now use `text-wrap: balance` and body text uses `text-wrap: pretty` to reduce widows and orphans when text wraps across lines. This is a progressive enhancement that falls back to normal wrapping in browsers without support.
diff --git a/packages/ui/src/primitives/Heading.tsx b/packages/ui/src/primitives/Heading.tsx
index 0495f241eb9..11afb3b2062 100644
--- a/packages/ui/src/primitives/Heading.tsx
+++ b/packages/ui/src/primitives/Heading.tsx
@@ -6,6 +6,7 @@ const { applyVariants, filterProps } = createVariants(theme => ({
     boxSizing: 'border-box',
     color: `${theme.colors.$colorForeground}`,
     margin: 0,
+    textWrap: 'balance',
   },
   variants: {
     textVariant: { ...common.textVariants(theme) },
diff --git a/packages/ui/src/primitives/Text.tsx b/packages/ui/src/primitives/Text.tsx
index a430b165cb3..fbc95d5b6b7 100644
--- a/packages/ui/src/primitives/Text.tsx
+++ b/packages/ui/src/primitives/Text.tsx
@@ -10,6 +10,7 @@ const { applyVariants, filterProps } = createVariants(theme => {
       boxSizing: 'border-box',
       margin: 0,
       fontSize: 'inherit',
+      textWrap: 'pretty',
       ...common.disabled(theme),
     },
     variants: {