From 08fa605e84d4e3d5345d3e4e580e764a5cb5ec4c Mon Sep 17 00:00:00 2001
From: Pedro Menezes <pmenezes@cloudflare.com>
Date: Sun, 9 Aug 2026 02:33:22 +0100
Subject: [PATCH 1/3] feat: Improve Empty component responsiveness

---
 .changeset/empty-responsive-content.md        |  5 ++++
 .../src/components/demos/EmptyDemo.tsx        |  4 +--
 packages/kumo/src/components/empty/empty.tsx  | 28 +++++++++++--------
 3 files changed, 24 insertions(+), 13 deletions(-)
 create mode 100644 .changeset/empty-responsive-content.md

diff --git a/.changeset/empty-responsive-content.md b/.changeset/empty-responsive-content.md
new file mode 100644
index 0000000000..4145db687e
--- /dev/null
+++ b/.changeset/empty-responsive-content.md
@@ -0,0 +1,5 @@
+---
+"@cloudflare/kumo": patch
+---
+
+Improve Empty mobile spacing and support React nodes in its title and description.
diff --git a/packages/kumo-docs-astro/src/components/demos/EmptyDemo.tsx b/packages/kumo-docs-astro/src/components/demos/EmptyDemo.tsx
index b11544b888..ed2f449a4f 100644
--- a/packages/kumo-docs-astro/src/components/demos/EmptyDemo.tsx
+++ b/packages/kumo-docs-astro/src/components/demos/EmptyDemo.tsx
@@ -16,7 +16,7 @@ export function EmptyDemo() {
       description="Get started by installing your first package."
       commandLine="npm install @cloudflare/kumo"
       contents={
-        <div className="flex items-center gap-2">
+        <div className="flex flex-col items-center gap-3 sm:flex-row sm:gap-2">
           <Button icon={<CodeIcon />}>See examples</Button>
           <Button icon={<GlobeIcon />} variant="primary">
             View documentation
@@ -79,7 +79,7 @@ export function EmptyWithActionsDemo() {
       title="No connection"
       description="Unable to connect to the server. Please check your connection and try again."
       contents={
-        <div className="flex gap-2">
+        <div className="flex flex-col items-center gap-3 sm:flex-row sm:gap-2">
           <Button variant="primary">Retry</Button>
           <Button variant="secondary">Go Back</Button>
         </div>
diff --git a/packages/kumo/src/components/empty/empty.tsx b/packages/kumo/src/components/empty/empty.tsx
index 7763e1dbc4..781c2ae295 100644
--- a/packages/kumo/src/components/empty/empty.tsx
+++ b/packages/kumo/src/components/empty/empty.tsx
@@ -1,5 +1,5 @@
 import { CheckIcon, CopyIcon } from "@phosphor-icons/react";
-import { useState } from "react";
+import { type ReactNode, useState } from "react";
 import { Button } from "../../components/button";
 import { cn } from "../../utils/cn";
 import { resolveVariant } from "../../utils/resolve-variant";
@@ -12,11 +12,11 @@ export const KUMO_EMPTY_VARIANTS = {
       description: "Compact empty state for smaller containers",
     },
     base: {
-      classes: "px-10 py-16 gap-6",
+      classes: "px-6 py-8 gap-4 md:px-10 md:py-16 md:gap-6",
       description: "Default empty state size",
     },
     lg: {
-      classes: "px-12 py-20 gap-8",
+      classes: "px-6 py-8 gap-4 md:px-12 md:py-20 md:gap-8",
       description: "Large empty state for prominent placement",
     },
   },
@@ -68,10 +68,10 @@ export function emptyVariants({
 export interface EmptyProps extends KumoEmptyVariantsProps {
   /** Decorative icon displayed above the title (e.g. from `@phosphor-icons/react`). */
   icon?: React.ReactNode;
-  /** Primary heading text for the empty state. */
-  title: string;
-  /** Secondary description text displayed below the title. */
-  description?: string;
+  /** Primary heading content for the empty state. */
+  title: ReactNode;
+  /** Secondary description content displayed below the title. */
+  description?: ReactNode;
   /** Shell command displayed in a copyable code block. */
   commandLine?: string;
   /** Additional content (buttons, links) rendered below the description. */
@@ -102,11 +102,17 @@ export function Empty({
   return (
     <div className={cn(emptyVariants({ size }), className)}>
       {icon}
-      <h2 className="text-2xl font-semibold">{title}</h2>
+      <div className="flex flex-col items-center gap-2">
+        <h2 className="text-xl font-semibold text-balance sm:text-2xl">
+          {title}
+        </h2>
 
-      {description && (
-        <p className="max-w-140 text-center text-kumo-subtle">{description}</p>
-      )}
+        {description && (
+          <p className="max-w-140 text-center text-base text-pretty text-kumo-subtle sm:text-lg">
+            {description}
+          </p>
+        )}
+      </div>
 
       {commandLine && (
         <div

From 2887c86dccdcf41f96949b643ae9e5c576beeacb Mon Sep 17 00:00:00 2001
From: Pedro Menezes <pmenezes@cloudflare.com>
Date: Sun, 9 Aug 2026 03:00:54 +0100
Subject: [PATCH 2/3] docs: clarify Empty changeset

---
 .changeset/empty-responsive-content.md | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/.changeset/empty-responsive-content.md b/.changeset/empty-responsive-content.md
index 4145db687e..335a025412 100644
--- a/.changeset/empty-responsive-content.md
+++ b/.changeset/empty-responsive-content.md
@@ -2,4 +2,8 @@
 "@cloudflare/kumo": patch
 ---
 
-Improve Empty mobile spacing and support React nodes in its title and description.
+Improve `Empty` responsiveness:
+- Adjust spacing and typography across viewport sizes
+- Balance titles and improve description wrapping
+- Stack and center example actions on mobile
+- Allow React nodes in `title` and `description`

From 82c312c3d5baed2976b54fb89aff0abc5c010355 Mon Sep 17 00:00:00 2001
From: Pedro Menezes <pmenezes@cloudflare.com>
Date: Sun, 9 Aug 2026 03:07:11 +0100
Subject: [PATCH 3/3] docs: format Empty changeset

---
 .changeset/empty-responsive-content.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.changeset/empty-responsive-content.md b/.changeset/empty-responsive-content.md
index 335a025412..09353b7647 100644
--- a/.changeset/empty-responsive-content.md
+++ b/.changeset/empty-responsive-content.md
@@ -3,6 +3,7 @@
 ---
 
 Improve `Empty` responsiveness:
+
 - Adjust spacing and typography across viewport sizes
 - Balance titles and improve description wrapping
 - Stack and center example actions on mobile