diff --git a/.design-sync/NOTES.md b/.design-sync/NOTES.md
index 34086dff..0bf68137 100644
--- a/.design-sync/NOTES.md
+++ b/.design-sync/NOTES.md
@@ -214,6 +214,20 @@ web-app shims but are deliberately EXCLUDED from the design project).
 - **@parcel/watcher** (optional dep of @tailwindcss/cli): its postinstall is
   denied in pnpm-workspace.yaml `allowBuilds` — not needed for one-shot builds.
 
+### 2026-08-23 second pass — Empty + Kbd (PR #799)
+
+Kit grew to 20 components. `Empty` and `Kbd` added to `src/design-sync.ts`,
+`cfg.componentSrcMap` (subparts nulled), previews authored, conventions
+enumeration updated. `Empty` needed `cardMode: "column"` (same `[GRID_OVERFLOW]`
+remedy as Accordion/InputGroup/Tabs). Incremental upload: the two component
+dirs + `_preview/{Empty,Kbd}.*` + shared closure
+(`_ds_bundle.js/.css`, `styles.css`, `README.md`, `_ds_sync.json`,
+`_ds_needs_recompile`). Gotcha: running `resync.mjs` WITHOUT `--entry` cleans
+`ds-bundle/` then fails resolving the package (expects a self-link in
+node_modules) — leaving an empty bundle. Always drive the individual
+`package-build/capture/validate` scripts with the explicit
+`--entry ./packages/ui/dist/design-sync.js`.
+
 ### Known render warns (2026-08-23 kit sync)
 - `[TOKENS_MISSING] --accordion-panel-height, --radius, --secondary, --foreground, --tw`
   — runtime/JS-set vars (accordion height) plus shadcn-generated arbitrary
diff --git a/.design-sync/config.json b/.design-sync/config.json
index 5c4ae20b..6cecc7aa 100644
--- a/.design-sync/config.json
+++ b/.design-sync/config.json
@@ -15,8 +15,10 @@
     "Combobox": "src/components/ui/combobox.tsx",
     "Dialog": "src/components/ui/dialog.tsx",
     "DropdownMenu": "src/components/ui/dropdown-menu.tsx",
+    "Empty": "src/components/ui/empty.tsx",
     "Input": "src/components/ui/input.tsx",
     "InputGroup": "src/components/ui/input-group.tsx",
+    "Kbd": "src/components/ui/kbd.tsx",
     "Label": "src/components/ui/label.tsx",
     "Popover": "src/components/ui/popover.tsx",
     "Select": "src/components/ui/select.tsx",
@@ -64,6 +66,12 @@
     "DialogPortal": null,
     "DialogTitle": null,
     "DialogTrigger": null,
+    "EmptyHeader": null,
+    "EmptyTitle": null,
+    "EmptyDescription": null,
+    "EmptyContent": null,
+    "EmptyMedia": null,
+    "KbdGroup": null,
     "DropdownMenuPortal": null,
     "DropdownMenuTrigger": null,
     "DropdownMenuContent": null,
@@ -113,6 +121,7 @@
   },
   "overrides": {
     "Accordion": { "cardMode": "column" },
+    "Empty": { "cardMode": "column" },
     "InputGroup": { "cardMode": "column" },
     "Tabs": { "cardMode": "column" },
     "Dialog": { "cardMode": "single", "primaryStory": "InviteTeammate", "viewport": "760x520" },
diff --git a/.design-sync/conventions.md b/.design-sync/conventions.md
index a2b757ef..32cac708 100644
--- a/.design-sync/conventions.md
+++ b/.design-sync/conventions.md
@@ -82,11 +82,14 @@ Cap prose at `--measure` (68ch).
 ## Components
 
 `Accordion` · `AlertDialog` · `Badge` · `Button` · `Checkbox` · `Combobox`
-· `Dialog` · `DropdownMenu` · `Input` · `InputGroup` · `Label` · `Popover`
-· `Select` · `Switch` · `Table` · `Tabs` · `Textarea` · `Tooltip`
+· `Dialog` · `DropdownMenu` · `Empty` · `Input` · `InputGroup` · `Kbd`
+· `Label` · `Popover` · `Select` · `Switch` · `Table` · `Tabs` · `Textarea`
+· `Tooltip`
 
 Compound parts (`DialogTrigger`, `SelectItem`, `TableRow`,
-`DropdownMenuItem`, `InputGroupAddon`, …) are all exported flat from the
+`DropdownMenuItem`, `InputGroupAddon`, `EmptyHeader`/`EmptyTitle`/
+`EmptyDescription`/`EmptyContent`/`EmptyMedia`, `KbdGroup`, …) are all
+exported flat from the
 same module. Key variant axes: `Button` `variant`
 (`default | outline | secondary | ghost | destructive | link`) and `size`
 (`xs | sm | default | lg | icon*`); `Badge` `variant` (same six). The
diff --git a/.design-sync/previews/Empty.tsx b/.design-sync/previews/Empty.tsx
new file mode 100644
index 00000000..3c44f615
--- /dev/null
+++ b/.design-sync/previews/Empty.tsx
@@ -0,0 +1,51 @@
+import "./canvas.module.css";
+import {
+  Button,
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@uploads/ui";
+
+export function Default() {
+  return (
+    <Empty style={{ width: 420 }} className="border">
+      <EmptyHeader>
+        <EmptyMedia variant="icon">⌁</EmptyMedia>
+        <EmptyTitle>No screenshots yet</EmptyTitle>
+        <EmptyDescription>
+          Capture one with <code>uploads screenshot &lt;url&gt;</code> and it shows up here.
+        </EmptyDescription>
+      </EmptyHeader>
+      <EmptyContent>
+        <Button variant="outline" size="sm">
+          Read the docs
+        </Button>
+      </EmptyContent>
+    </Empty>
+  );
+}
+
+export function TitleOnly() {
+  return (
+    <Empty style={{ width: 420 }} className="border">
+      <EmptyHeader>
+        <EmptyTitle>No galleries yet</EmptyTitle>
+        <EmptyDescription>Create one to collect related uploads.</EmptyDescription>
+      </EmptyHeader>
+    </Empty>
+  );
+}
+
+export function Inline() {
+  return (
+    <Empty style={{ width: 420 }} className="items-start border-0 p-2 text-left">
+      <EmptyHeader className="items-start text-left">
+        <EmptyTitle>No tokens yet</EmptyTitle>
+        <EmptyDescription>Create one above to start.</EmptyDescription>
+      </EmptyHeader>
+    </Empty>
+  );
+}
diff --git a/.design-sync/previews/Kbd.tsx b/.design-sync/previews/Kbd.tsx
new file mode 100644
index 00000000..4fe4bb2b
--- /dev/null
+++ b/.design-sync/previews/Kbd.tsx
@@ -0,0 +1,30 @@
+import "./canvas.module.css";
+import { Kbd, KbdGroup } from "@uploads/ui";
+
+export function Default() {
+  return (
+    <KbdGroup>
+      <Kbd>⌘</Kbd>
+      <Kbd>K</Kbd>
+    </KbdGroup>
+  );
+}
+
+export function SingleKey() {
+  return <Kbd>/</Kbd>;
+}
+
+export function InlineHint() {
+  return (
+    <span
+      style={{ display: "inline-flex", alignItems: "center", gap: 8 }}
+      className="text-sm text-muted-foreground"
+    >
+      Filter path
+      <KbdGroup>
+        <Kbd>⌘</Kbd>
+        <Kbd>K</Kbd>
+      </KbdGroup>
+    </span>
+  );
+}
diff --git a/apps/web/src/components/ScreenshotsByPath.tsx b/apps/web/src/components/ScreenshotsByPath.tsx
index 178af93c..502a0e34 100644
--- a/apps/web/src/components/ScreenshotsByPath.tsx
+++ b/apps/web/src/components/ScreenshotsByPath.tsx
@@ -21,6 +21,8 @@
  */
 import { Callout, Input, Select } from "@uploads/ui";
 import "@uploads/ui/styles.css";
+import { Empty, EmptyContent, EmptyHeader, EmptyTitle } from "@uploads/ui/components/ui/empty";
+import { Kbd } from "@uploads/ui/components/ui/kbd";
 import {
   useEffect,
   useLayoutEffect,
@@ -90,15 +92,41 @@ function EmptyShotsCta({ title }: { title: string }) {
     }
   };
   return (
-    <div className="ws-empty-state ws-empty-state--cta">
-      <p className="ws-empty-state__title">{title}</p>
-      <div className="command ws-empty__command">
-        <code>{EMPTY_CTA_CMD}</code>
-        <button type="button" aria-live="polite" onClick={() => void copy()}>
-          {copied ? "copied ✓" : "copy"}
-        </button>
-      </div>
-    </div>
+    <Empty>
+      <EmptyHeader>
+        <EmptyTitle>{title}</EmptyTitle>
+      </EmptyHeader>
+      <EmptyContent>
+        <div className="ws-empty__command flex w-full min-w-0 items-center gap-2 rounded-[6px] border border-line bg-panel px-3 py-2">
+          <code className="min-w-0 flex-1 overflow-x-auto font-[var(--mono)] text-[13px] text-fg [overflow-wrap:anywhere]">
+            {EMPTY_CTA_CMD}
+          </code>
+          <button
+            type="button"
+            aria-live="polite"
+            className="text-btn text-btn--boxed flex-none"
+            onClick={() => void copy()}
+          >
+            {copied ? "copied ✓" : "copy"}
+          </button>
+        </div>
+      </EmptyContent>
+    </Empty>
+  );
+}
+
+/**
+ * Compact Empty for inline filter/drill "nothing found" messages — smaller
+ * than the CTA-style empty state above, since these sit inside already-
+ * scoped list/grid contexts rather than replacing the whole page.
+ */
+function InlineEmpty({ title }: { title: ReactNode }) {
+  return (
+    <Empty className="gap-2 p-3">
+      <EmptyHeader className="gap-1">
+        <EmptyTitle>{title}</EmptyTitle>
+      </EmptyHeader>
+    </Empty>
   );
 }
 
@@ -429,6 +457,13 @@ function FilterBar({
   // useful to offer until the user edits it back into a query.
   const suggestions = path ? [] : pathSuggestions(catalog, { project, q });
   const open = suggestOpen && suggestions.length > 0;
+  // "Ctrl K" is the deterministic default so the server's render and the
+  // client's first render agree bit-for-bit (no `navigator` at SSR time) —
+  // corrected to "⌘K" after mount, once hydration has already reconciled.
+  const [modKbd, setModKbd] = useState("Ctrl K");
+  useEffect(() => {
+    if (/Mac|iPhone|iPad|iPod/.test(navigator.userAgent)) setModKbd("⌘K");
+  }, []);
 
   const pick = (picked: string) => {
     setSuggestOpen(false);
@@ -479,7 +514,7 @@ function FilterBar({
         <Input
           id="wsp-path-filter"
           type="search"
-          className="wsp-filter__q flex-1 min-w-0 min-h-9 px-3 py-1.5 text-base sm:text-[13px] rounded-[6px] box-border"
+          className={`wsp-filter__q flex-1 min-w-0 min-h-9 px-3 py-1.5 text-base sm:text-[13px] rounded-[6px] box-border${value === "" ? " pr-14" : ""}`}
           aria-label="Filter by path"
           aria-keyshortcuts="Meta+K Control+K Slash"
           aria-expanded={open}
@@ -504,6 +539,9 @@ function FilterBar({
           }}
           onKeyDown={onKeyDown}
         />
+        {value === "" && (
+          <Kbd className="absolute top-1/2 right-2.5 -translate-y-1/2">{modKbd}</Kbd>
+        )}
         {open && (
           <ul
             className="wsp-suggest absolute top-[calc(100%+4px)] left-0 right-0 z-30 m-0 max-h-[280px] list-none overflow-y-auto rounded-[6px] border border-line bg-panel p-1 shadow-[0_8px_24px_rgb(0_0_0_/_0.25)]"
@@ -1129,7 +1167,7 @@ function ScreenshotsByPathInner({
                 as a metadata filter — spec keeps URL-prefix search out of
                 scope), so a truncated response may hide project matches: say
                 so rather than claiming an empty/complete result. */}
-            {drillItems.length === 0 && <p className="wft-end">{drillEmptyMessage}</p>}
+            {drillItems.length === 0 && <InlineEmpty title={drillEmptyMessage} />}
             {drillItems.length > 0 && drill.truncated && (
               <p className="wft-end">
                 {view.project
@@ -1159,13 +1197,15 @@ function ScreenshotsByPathInner({
           !view.merged && overview.latest.length === 0 && overview.catalog.length === 0 ? (
             <EmptyShotsCta title="No screenshots yet" />
           ) : (
-            <p className="wft-end">
-              {overview.latest.length === 0
-                ? view.merged
-                  ? "No merged uploads to show."
-                  : "No recent uploads to show."
-                : "No recent uploads match this filter."}
-            </p>
+            <InlineEmpty
+              title={
+                overview.latest.length === 0
+                  ? view.merged
+                    ? "No merged uploads to show."
+                    : "No recent uploads to show."
+                  : "No recent uploads match this filter."
+              }
+            />
           )
         ) : (
           <>
@@ -1243,7 +1283,7 @@ function ScreenshotsByPathInner({
       {isEmptyWorkspace ? (
         <EmptyShotsCta title="No screenshots yet" />
       ) : isEmptyFilter ? (
-        <p className="wft-end">{emptyFilterMessage}</p>
+        <InlineEmpty title={emptyFilterMessage} />
       ) : (
         <>
           {sectionLabels.map((label, index) => {
diff --git a/apps/web/src/components/WorkspaceFileTable.tsx b/apps/web/src/components/WorkspaceFileTable.tsx
index 84ea8c1c..318b2c9f 100644
--- a/apps/web/src/components/WorkspaceFileTable.tsx
+++ b/apps/web/src/components/WorkspaceFileTable.tsx
@@ -19,6 +19,8 @@
  */
 import { Callout } from "@uploads/ui";
 import "@uploads/ui/styles.css";
+import { Empty, EmptyDescription, EmptyHeader, EmptyTitle } from "@uploads/ui/components/ui/empty";
+import { Kbd } from "@uploads/ui/components/ui/kbd";
 import { Fragment, useEffect, useRef, useState, type CSSProperties, type ReactNode } from "react";
 import { IslandErrorBoundary } from "./IslandErrorBoundary";
 import type { ConnectedWorkSetter } from "../lib/workspace-rail";
@@ -800,6 +802,39 @@ function WorkspaceFileTableInner({
     };
   }, []);
 
+  // "Ctrl K" is the deterministic default so the server's render and the
+  // client's first render agree bit-for-bit (no `navigator` at SSR time) —
+  // corrected to "⌘K" after mount, once hydration has already reconciled.
+  const [modKbd, setModKbd] = useState("Ctrl K");
+  useEffect(() => {
+    if (/Mac|iPhone|iPad|iPod/.test(navigator.userAgent)) setModKbd("⌘K");
+  }, []);
+
+  // "/" or ⌘K/Ctrl+K focuses the filter input from anywhere on the page,
+  // mirroring ScreenshotsByPath's path-filter shortcut.
+  useEffect(() => {
+    const typingInField = (event: KeyboardEvent) => {
+      const target = event.target;
+      if (!(target instanceof HTMLElement)) return false;
+      return Boolean(target.closest("input, textarea, select") || target.isContentEditable);
+    };
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.isComposing) return;
+      if ((event.key === "k" || event.key === "K") && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        document.getElementById("wft-filter-input")?.focus();
+        return;
+      }
+      if (event.key === "/" && !event.metaKey && !event.ctrlKey && !event.altKey) {
+        if (typingInField(event)) return;
+        event.preventDefault();
+        document.getElementById("wft-filter-input")?.focus();
+      }
+    };
+    document.addEventListener("keydown", onKeyDown);
+    return () => document.removeEventListener("keydown", onKeyDown);
+  }, []);
+
   // Close the open `⋯` menu on outside click / Escape.
   useEffect(() => {
     if (!openMenuKey) return;
@@ -1020,6 +1055,9 @@ function WorkspaceFileTableInner({
     parts.push(pluralCount(count, "file"));
     return parts.join(" · ");
   })();
+  // True "nothing here" states — as opposed to loading/error/truncated/
+  // non-empty end-of-list markers, which stay plain `.wft-end` text.
+  const isEmptyState = state.status === "ok" && count === 0 && (filtered || folderCount === 0);
 
   const parsedDraft = parseDraft(draft);
   // Only treat the parsed key as "selected" once it's a valid (lowercase) key —
@@ -1190,8 +1228,9 @@ function WorkspaceFileTableInner({
             addFilter();
           }}
         >
-          <span className="input-group__field">
+          <span className="input-group__field relative">
             <input
+              id="wft-filter-input"
               role="combobox"
               aria-expanded={menuOpen}
               aria-controls="wft-suggest"
@@ -1202,7 +1241,9 @@ function WorkspaceFileTableInner({
                   : undefined
               }
               aria-label="Filter files"
+              aria-keyshortcuts="Meta+K Control+K Slash"
               placeholder="Filter by name, or key=value…"
+              style={draft === "" ? { paddingRight: 56 } : undefined}
               value={draft}
               onFocus={() => {
                 // Cancel a still-armed blur-close from a quick refocus — otherwise
@@ -1269,6 +1310,9 @@ function WorkspaceFileTableInner({
                 }
               }}
             />
+            {draft === "" && (
+              <Kbd className="absolute top-1/2 right-2.5 -translate-y-1/2">{modKbd}</Kbd>
+            )}
           </span>
           <button type="submit" className="input-group__action">
             add
@@ -1608,7 +1652,20 @@ function WorkspaceFileTableInner({
         </div>
       )}
 
-      <div className="wft-end">{endLabel}</div>
+      {isEmptyState ? (
+        <Empty className="wft-empty">
+          <EmptyHeader>
+            <EmptyTitle>{endLabel}</EmptyTitle>
+            <EmptyDescription>
+              {filtered
+                ? "Try removing a filter or searching a different name."
+                : "Files uploaded to this workspace will show up here."}
+            </EmptyDescription>
+          </EmptyHeader>
+        </Empty>
+      ) : (
+        <div className="wft-end">{endLabel}</div>
+      )}
 
       {state.status === "ok" && state.cursor && (
         <button
diff --git a/apps/web/src/components/dev/UiKit.tsx b/apps/web/src/components/dev/UiKit.tsx
index 409beee0..6a07129d 100644
--- a/apps/web/src/components/dev/UiKit.tsx
+++ b/apps/web/src/components/dev/UiKit.tsx
@@ -65,6 +65,15 @@ import {
   TooltipProvider,
   TooltipTrigger,
 } from "@uploads/ui/components/ui/tooltip";
+import {
+  Empty,
+  EmptyContent,
+  EmptyDescription,
+  EmptyHeader,
+  EmptyMedia,
+  EmptyTitle,
+} from "@uploads/ui/components/ui/empty";
+import { Kbd, KbdGroup } from "@uploads/ui/components/ui/kbd";
 import {
   Combobox,
   ComboboxContent,
@@ -231,6 +240,39 @@ export default function UiKit() {
         </Table>
       </Section>
 
+      <Section eyebrow="Empty states">
+        <Empty className="max-w-xl border">
+          <EmptyHeader>
+            <EmptyMedia variant="icon">⌁</EmptyMedia>
+            <EmptyTitle>No screenshots yet</EmptyTitle>
+            <EmptyDescription>
+              Capture one with <code>uploads screenshot &lt;url&gt;</code> and it shows up here.
+            </EmptyDescription>
+          </EmptyHeader>
+          <EmptyContent>
+            <Button variant="outline" size="sm">
+              Read the docs
+            </Button>
+          </EmptyContent>
+        </Empty>
+      </Section>
+
+      <Section eyebrow="Kbd">
+        <div className="flex flex-wrap items-center gap-4 text-sm text-muted-foreground">
+          <span className="flex items-center gap-2">
+            Filter
+            <KbdGroup>
+              <Kbd>⌘</Kbd>
+              <Kbd>K</Kbd>
+            </KbdGroup>
+          </span>
+          <span className="flex items-center gap-2">
+            Search
+            <Kbd>/</Kbd>
+          </span>
+        </div>
+      </Section>
+
       <Section eyebrow="Overlays">
         <div className="flex flex-wrap items-center gap-3">
           <Dialog>
diff --git a/apps/web/src/lib/developers-ui.ts b/apps/web/src/lib/developers-ui.ts
index e130cc2e..1afd9858 100644
--- a/apps/web/src/lib/developers-ui.ts
+++ b/apps/web/src/lib/developers-ui.ts
@@ -8,7 +8,7 @@ import {
   type IssuedWorkspaceToken,
   type MintableWorkspace,
 } from "./api-client";
-import { escapeHtml } from "./workspace-ui";
+import { escapeHtml, renderEmptyStateHtml } from "./workspace-ui";
 
 export async function loadDevelopersPageData(
   apiOrigin: string,
@@ -39,7 +39,11 @@ export function tokenAccessLabel(scopes: string[]): string {
 
 export function renderIssuedTokenListHtml(tokens: IssuedWorkspaceToken[]): string {
   if (tokens.length === 0) {
-    return `<li><div class="detail-main"><div class="detail-title">No tokens yet</div><div class="detail-meta">Create one above to start.</div></div></li>`;
+    return `<li>${renderEmptyStateHtml({
+      title: "No tokens yet",
+      description: "Create one above to start.",
+      variant: "inline",
+    })}</li>`;
   }
   return tokens
     .map((token) => {
diff --git a/apps/web/src/lib/workspace-ui.test.ts b/apps/web/src/lib/workspace-ui.test.ts
index 143366cc..d45ca16a 100644
--- a/apps/web/src/lib/workspace-ui.test.ts
+++ b/apps/web/src/lib/workspace-ui.test.ts
@@ -6,6 +6,7 @@ import {
   formatMarketedBytes,
   orderOrgsOldestFirst,
   renderDetailListPlaceholderHtml,
+  renderEmptyStateHtml,
   renderFilesPlaceholderHtml,
   renderGalleriesEmptyHtml,
   renderGalleriesGridHtml,
@@ -470,19 +471,69 @@ describe("skeleton placeholders", () => {
   });
 });
 
+describe("renderEmptyStateHtml", () => {
+  it("mirrors the shadcn Empty component's data-slot structure", () => {
+    const html = renderEmptyStateHtml({ title: "No items", description: "Do a thing." });
+    expect(html).toContain('data-slot="empty"');
+    expect(html).toContain('data-slot="empty-header"');
+    expect(html).toContain('data-slot="empty-title"');
+    expect(html).toContain('data-slot="empty-description"');
+    expect(html).toContain(">No items<");
+    expect(html).toContain(">Do a thing.<");
+  });
+
+  it("escapes the title but leaves description/content as caller-trusted HTML", () => {
+    const html = renderEmptyStateHtml({
+      title: "<script>alert(1)</script>",
+      description: 'Create a <a href="/x">thing</a>.',
+    });
+    expect(html).not.toContain("<script>");
+    expect(html).toContain("&lt;script&gt;");
+    expect(html).toContain('<a href="/x">thing</a>');
+  });
+
+  it("omits the description and content slots when not given", () => {
+    const html = renderEmptyStateHtml({ title: "No items" });
+    expect(html).not.toContain("empty-description");
+    expect(html).not.toContain("empty-content");
+  });
+
+  it("renders the content slot for a trailing CTA", () => {
+    const html = renderEmptyStateHtml({ title: "No items", content: "<button>Go</button>" });
+    expect(html).toContain('data-slot="empty-content"');
+    expect(html).toContain("<button>Go</button>");
+  });
+
+  it("defaults to the card variant's centered, bordered classes", () => {
+    const html = renderEmptyStateHtml({ title: "No items" });
+    expect(html).toContain("rounded-xl");
+    expect(html).toContain("border-dashed");
+    expect(html).toContain("items-center");
+  });
+
+  it("the inline variant drops the card chrome for a compact one-liner", () => {
+    const html = renderEmptyStateHtml({ title: "No items", variant: "inline" });
+    expect(html).not.toContain("rounded-xl");
+    expect(html).not.toContain("border-dashed");
+    expect(html).toContain("items-start");
+  });
+});
+
 describe("renderGalleriesEmptyHtml", () => {
   const cmd = 'uploads gallery create --title "Release screenshots"';
 
   it("leads with the state, not with instructions", () => {
     const html = renderGalleriesEmptyHtml(cmd);
     const headlineAt = html.indexOf("No galleries yet");
-    const commandAt = html.indexOf("ws-empty__command");
+    const commandAt = html.indexOf('data-slot="empty-content"');
     expect(headlineAt).toBeGreaterThanOrEqual(0);
     expect(commandAt).toBeGreaterThan(headlineAt);
   });
 
-  it("renders as the centered CTA variant", () => {
-    expect(renderGalleriesEmptyHtml(cmd)).toContain("ws-empty-state--cta");
+  it("renders as the Empty component's card variant", () => {
+    const html = renderGalleriesEmptyHtml(cmd);
+    expect(html).toContain('data-slot="empty"');
+    expect(html).toContain("rounded-xl");
   });
 
   it("carries the create command as the single primary action", () => {
@@ -501,7 +552,7 @@ describe("renderGalleriesEmptyHtml", () => {
 
   it("skips the restated body sentence — the page note and details block above/below it already cover it", () => {
     const html = renderGalleriesEmptyHtml(cmd);
-    expect(html).not.toContain("ws-empty-state__body");
+    expect(html).not.toContain("empty-description");
     expect(html).not.toContain("public link");
   });
 });
diff --git a/apps/web/src/lib/workspace-ui.ts b/apps/web/src/lib/workspace-ui.ts
index a63eeb0c..8f6fbb28 100644
--- a/apps/web/src/lib/workspace-ui.ts
+++ b/apps/web/src/lib/workspace-ui.ts
@@ -553,6 +553,73 @@ export function renderUsagePlaceholderHtml(meters = 2): string {
   return `<div class="ul-progress" aria-busy="true">${rows}</div><div class="usage-meta">${skeletonBarHtml("64px")}</div>`;
 }
 
+/**
+ * Empty-state builder — an HTML-string mirror of the shadcn `Empty`
+ * component (packages/ui/src/components/ui/empty.tsx) for signed-in Astro
+ * pages, which can't mount React but can use the same Tailwind classes
+ * (packages/ui/src/theme.css `@source`s apps/web/src). Keep the two in sync:
+ * `data-slot` names and per-part classes here should match the component's
+ * `data-slot="empty…"` parts exactly for the `card` variant.
+ *
+ * `title` is escaped automatically. `description` and `content` are raw
+ * HTML — callers compose/escape any dynamic pieces themselves (same
+ * convention as `renderMembersHtml`'s `escapeHtml(...)` calls), which is
+ * what lets a description carry a real `<a>` link (e.g. "create one").
+ *
+ * `variant`:
+ * - `"card"` (default) — the component's own centered, bordered, padded
+ *   shape. Right for a block that *is* the page's primary content (e.g. a
+ *   galleries grid with nothing in it).
+ * - `"inline"` — a left-aligned, unpadded, unbordered shape for a one-line
+ *   note sitting inside an existing form or list (e.g. "No tokens yet"),
+ *   where the card's visual weight would be out of place.
+ */
+export interface EmptyStateOptions {
+  title: string;
+  description?: string;
+  /** Raw icon/SVG markup for the `empty-icon` media slot. Omit for no icon. */
+  mediaGlyph?: string;
+  /** Raw HTML for the `empty-content` slot below the header (e.g. a copyable command). */
+  content?: string;
+  variant?: "card" | "inline";
+}
+
+const EMPTY_VARIANT_CLASSES: Record<
+  "card" | "inline",
+  { root: string; header: string; content: string }
+> = {
+  card: {
+    root: "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance",
+    header: "flex max-w-sm flex-col items-center gap-2",
+    content: "flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance",
+  },
+  inline: {
+    root: "flex w-full min-w-0 flex-col items-start gap-1 text-left text-balance",
+    header: "flex flex-col items-start gap-1",
+    content: "flex w-full min-w-0 flex-col items-start gap-2 text-sm text-balance",
+  },
+};
+
+const EMPTY_MEDIA_CLASS =
+  "mb-2 flex shrink-0 items-center justify-center bg-transparent [&_svg]:pointer-events-none [&_svg]:shrink-0";
+const EMPTY_TITLE_CLASS = "text-sm font-medium tracking-tight";
+const EMPTY_DESCRIPTION_CLASS =
+  "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary";
+
+export function renderEmptyStateHtml(opts: EmptyStateOptions): string {
+  const shape = EMPTY_VARIANT_CLASSES[opts.variant ?? "card"];
+  const media = opts.mediaGlyph
+    ? `<div data-slot="empty-icon" data-variant="default" class="${EMPTY_MEDIA_CLASS}">${opts.mediaGlyph}</div>`
+    : "";
+  const description = opts.description
+    ? `<div data-slot="empty-description" class="${EMPTY_DESCRIPTION_CLASS}">${opts.description}</div>`
+    : "";
+  const content = opts.content
+    ? `<div data-slot="empty-content" class="${shape.content}">${opts.content}</div>`
+    : "";
+  return `<div data-slot="empty" class="${shape.root}"><div data-slot="empty-header" class="${shape.header}">${media}<div data-slot="empty-title" class="${EMPTY_TITLE_CLASS}">${escapeHtml(opts.title)}</div>${description}</div>${content}</div>`;
+}
+
 /**
  * Galleries empty state.
  *
@@ -562,20 +629,17 @@ export function renderUsagePlaceholderHtml(meters = 2): string {
  *
  * No body sentence: the page-header note above this block already explains
  * what a gallery is — a restatement here was stacking, not informing. This
- * stays down to the state plus the one action that resolves it, centered as
- * a CTA (`--cta` modifier) rather than left-set like a list row. The page
- * hides its reference-commands details block while this is shown, so the
- * create command appears exactly once.
+ * stays down to the state plus the one action that resolves it, using the
+ * `card` variant's centered layout rather than left-set like a list row. The
+ * page hides its reference-commands details block while this is shown, so
+ * the create command appears exactly once.
  */
 export function renderGalleriesEmptyHtml(createCmd: string): string {
   const safe = escapeHtml(createCmd);
-  return `<div class="ws-empty-state ws-empty-state--cta">
-  <p class="ws-empty-state__title">No galleries yet</p>
-  <div class="command ws-empty__command">
-    <code>${safe}</code>
-    <button type="button" data-copy="${safe}" aria-live="polite">copy</button>
-  </div>
-</div>`;
+  return renderEmptyStateHtml({
+    title: "No galleries yet",
+    content: `<div class="command"><code>${safe}</code><button type="button" data-copy="${safe}" aria-live="polite">copy</button></div>`,
+  });
 }
 
 /** Galleries table placeholder — same chrome as `renderGalleriesTableHtml`. */
diff --git a/apps/web/src/pages/account/developers.astro b/apps/web/src/pages/account/developers.astro
index 8748ad0d..6e87e146 100644
--- a/apps/web/src/pages/account/developers.astro
+++ b/apps/web/src/pages/account/developers.astro
@@ -8,7 +8,7 @@ import {
   renderWorkspaceOptionsHtml,
 } from "../../lib/developers-ui";
 import { resolveSignedInOrigins } from "../../lib/signed-in-page";
-import { renderDetailListPlaceholderHtml } from "../../lib/workspace-ui";
+import { renderDetailListPlaceholderHtml, renderEmptyStateHtml } from "../../lib/workspace-ui";
 
 export const prerender = false;
 
@@ -84,9 +84,17 @@ const tokensReady = initial.tokens !== null;
         1 year, or until you revoke them. The CLI reads the workspace from the token.
       </p>
 
-      <p class="muted cli-note" id="token-empty" hidden={knownEmpty ? undefined : true}>
-        Create a <a href="/account/workspaces/new">workspace</a> first, then mint a token for it.
-      </p>
+      <div
+        class="cli-note"
+        id="token-empty"
+        hidden={knownEmpty ? undefined : true}
+        set:html={renderEmptyStateHtml({
+          title: "No workspace yet",
+          description:
+            'Create a <a href="/account/workspaces/new">workspace</a> first, then mint a token for it.',
+          variant: "inline",
+        })}
+      />
 
       <form class="ws-form" id="token-form" hidden={knownEmpty ? true : undefined}>
         <label
diff --git a/apps/web/src/pages/account/profile.astro b/apps/web/src/pages/account/profile.astro
index 73de311e..43ec3f70 100644
--- a/apps/web/src/pages/account/profile.astro
+++ b/apps/web/src/pages/account/profile.astro
@@ -8,7 +8,7 @@ import {
 } from "../../lib/account-profile-ui";
 import { serverAuthFetchImpl } from "../../lib/auth-proxy";
 import { resolveSignedInOrigins } from "../../lib/signed-in-page";
-import { renderDetailListPlaceholderHtml } from "../../lib/workspace-ui";
+import { renderDetailListPlaceholderHtml, renderEmptyStateHtml } from "../../lib/workspace-ui";
 
 export const prerender = false;
 
@@ -72,9 +72,10 @@ const sessionsEmpty = sessionsReady && (initial.sessions?.length ?? 0) === 0;
         id="sessions-status"
         class="muted detail-status"
         hidden={sessionsEmpty ? undefined : true}
-      >
-        {sessionsEmpty ? "No active sessions." : ""}
-      </div>
+        set:html={sessionsEmpty
+          ? renderEmptyStateHtml({ title: "No active sessions.", variant: "inline" })
+          : ""}
+      />
       <ul
         class="detail-list"
         id="sessions-list"
@@ -154,7 +155,7 @@ const sessionsEmpty = sessionsReady && (initial.sessions?.length ?? 0) === 0;
       isUpgradeDismissed,
       resolveUpgradePrompt,
     } from "../../lib/cli-upgrade";
-    import { renderDetailListPlaceholderHtml } from "../../lib/workspace-ui";
+    import { renderDetailListPlaceholderHtml, renderEmptyStateHtml } from "../../lib/workspace-ui";
 
     onAstroPageLoad(() => {
       if (!document.getElementById("acct-email")) return;
@@ -282,7 +283,13 @@ const sessionsEmpty = sessionsReady && (initial.sessions?.length ?? 0) === 0;
         if (!sessions.length) {
           list.hidden = true;
           list.removeAttribute("aria-busy");
-          showStatus(status, "No active sessions.");
+          showStatus(
+            status,
+            renderEmptyStateHtml({ title: "No active sessions.", variant: "inline" }),
+            {
+              html: true,
+            },
+          );
           return;
         }
 
diff --git a/apps/web/src/pages/account/workspaces.astro b/apps/web/src/pages/account/workspaces.astro
index 25c9bcb3..8f91902e 100644
--- a/apps/web/src/pages/account/workspaces.astro
+++ b/apps/web/src/pages/account/workspaces.astro
@@ -87,7 +87,11 @@ if (!managing) {
     } from "../../lib/workspaces-nav";
     import { workspaceCapMessage } from "@uploads/billing";
     import { shouldShowProBadge } from "../../lib/plan-badge";
-    import { escapeHtml, renderWorkspacesPlaceholderHtml } from "../../lib/workspace-ui";
+    import {
+      escapeHtml,
+      renderEmptyStateHtml,
+      renderWorkspacesPlaceholderHtml,
+    } from "../../lib/workspace-ui";
 
     onAstroPageLoad(() => {
       if (!document.getElementById("orgs-status")) return;
@@ -150,8 +154,11 @@ if (!managing) {
           list.hidden = true;
           list.removeAttribute("aria-busy");
           status.hidden = false;
-          status.innerHTML =
-            'No workspaces yet — <a href="/account/workspaces/new">create one</a>, or accept an invite.';
+          status.innerHTML = renderEmptyStateHtml({
+            title: "No workspaces yet",
+            description: '<a href="/account/workspaces/new">Create one</a>, or accept an invite.',
+            variant: "inline",
+          });
           return;
         }
 
diff --git a/apps/web/src/pages/account/workspaces/[name]/settings.astro b/apps/web/src/pages/account/workspaces/[name]/settings.astro
index e595c158..7f875b95 100644
--- a/apps/web/src/pages/account/workspaces/[name]/settings.astro
+++ b/apps/web/src/pages/account/workspaces/[name]/settings.astro
@@ -169,13 +169,17 @@ const tip = {
           <div class="cs-row__control flex items-center gap-2.5">
             <button
               type="button"
-              class="cs-toggle"
+              class="group relative inline-flex h-[18.4px] w-[32px] shrink-0 items-center rounded-full border border-transparent bg-input outline-none transition-all focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-checked:bg-primary"
               role="switch"
+              data-slot="switch"
               id="cs-show-metadata"
               aria-checked="false"
               aria-label="Metadata captions"
             >
-              <span class="cs-toggle__knob" aria-hidden="true"></span>
+              <span
+                class="pointer-events-none block size-4 translate-x-0 rounded-full bg-background ring-0 transition-transform group-aria-checked:translate-x-[calc(100%-2px)]"
+                data-slot="switch-thumb"
+                aria-hidden="true"></span>
             </button>
           </div>
         </div>
@@ -200,13 +204,17 @@ const tip = {
           <div class="cs-row__control flex items-center gap-2.5">
             <button
               type="button"
-              class="cs-toggle"
+              class="group relative inline-flex h-[18.4px] w-[32px] shrink-0 items-center rounded-full border border-transparent bg-input outline-none transition-all focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-checked:bg-primary"
               role="switch"
+              data-slot="switch"
               id="cs-link-to-file-page"
               aria-checked="false"
               aria-label="Link items to file pages"
             >
-              <span class="cs-toggle__knob" aria-hidden="true"></span>
+              <span
+                class="pointer-events-none block size-4 translate-x-0 rounded-full bg-background ring-0 transition-transform group-aria-checked:translate-x-[calc(100%-2px)]"
+                data-slot="switch-thumb"
+                aria-hidden="true"></span>
             </button>
           </div>
         </div>
@@ -231,13 +239,17 @@ const tip = {
           <div class="cs-row__control flex items-center gap-2.5">
             <button
               type="button"
-              class="cs-toggle"
+              class="group relative inline-flex h-[18.4px] w-[32px] shrink-0 items-center rounded-full border border-transparent bg-input outline-none transition-all focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 aria-checked:bg-primary"
               role="switch"
+              data-slot="switch"
               id="cs-ingest-github-attachments"
               aria-checked="false"
               aria-label="Import GitHub attachments"
             >
-              <span class="cs-toggle__knob" aria-hidden="true"></span>
+              <span
+                class="pointer-events-none block size-4 translate-x-0 rounded-full bg-background ring-0 transition-transform group-aria-checked:translate-x-[calc(100%-2px)]"
+                data-slot="switch-thumb"
+                aria-hidden="true"></span>
             </button>
           </div>
         </div>
@@ -371,47 +383,6 @@ const tip = {
 
   <style>
     /* ---------- Comment settings rows ---------- */
-    /* Toggle switch (role=switch button). Replaces the tri-state segmented
-       control for the boolean rows — the workspace value is the default, so a
-       plain on/off reads cleaner than auto/on/off (issue #365). */
-    .cs-toggle {
-      position: relative;
-      width: 38px;
-      height: 21px;
-      flex: none;
-      padding: 0;
-      border: 1px solid var(--line);
-      border-radius: 999px;
-      background: var(--bg);
-      cursor: pointer;
-      transition:
-        background 0.15s ease,
-        border-color 0.15s ease;
-    }
-    .cs-toggle__knob {
-      position: absolute;
-      top: 2px;
-      left: 2px;
-      width: 15px;
-      height: 15px;
-      border-radius: 999px;
-      background: var(--muted);
-      transition:
-        left 0.15s ease,
-        background 0.15s ease;
-    }
-    .cs-toggle[aria-checked="true"] {
-      background: color-mix(in srgb, var(--accent) 28%, transparent);
-      border-color: var(--accent);
-    }
-    .cs-toggle[aria-checked="true"] .cs-toggle__knob {
-      left: 19px;
-      background: var(--accent);
-    }
-    .cs-toggle:focus-visible {
-      outline: 2px solid var(--accent);
-      outline-offset: 2px;
-    }
     /* Dimmed when a linked repo's `.uploads.yml` pins this row — its
        workspace-default control still shows the value, just de-emphasized,
        since the repo config wins regardless of what's picked here. Toggled
diff --git a/apps/web/src/pages/dev/ui-kit.astro b/apps/web/src/pages/dev/ui-kit.astro
index d89f7d87..6c8c2edf 100644
--- a/apps/web/src/pages/dev/ui-kit.astro
+++ b/apps/web/src/pages/dev/ui-kit.astro
@@ -9,7 +9,9 @@ import { env } from "cloudflare:workers";
 import BaseHead from "../../components/BaseHead.astro";
 import "@uploads/ui/theme.css";
 
-if (env.ENVIRONMENT === "production") {
+// import.meta.env.DEV keeps the page reachable under `astro dev`, where
+// platformProxy serves wrangler.jsonc's ENVIRONMENT="production" verbatim.
+if (!import.meta.env.DEV && env.ENVIRONMENT === "production") {
   return new Response(null, { status: 404 });
 }
 ---
diff --git a/apps/web/src/pages/index.astro b/apps/web/src/pages/index.astro
index 0fcc51d0..711b2c3a 100644
--- a/apps/web/src/pages/index.astro
+++ b/apps/web/src/pages/index.astro
@@ -332,7 +332,8 @@ Source (and where to look if something breaks): https://github.com/buildinternet
         max-width: var(--measure);
         margin: 0 0 12px 2px;
       }
-      .sect-lede code {
+      .sect-lede code,
+      .feature code {
         font: var(--text-micro) var(--mono);
         color: var(--fg);
         background: var(--panel);
@@ -367,14 +368,6 @@ Source (and where to look if something breaks): https://github.com/buildinternet
         color: var(--body);
         margin: 0;
       }
-      .feature code {
-        font: var(--text-micro) var(--mono);
-        color: var(--fg);
-        background: var(--panel);
-        border: 1px solid var(--line);
-        border-radius: 4px;
-        padding: 0 4px;
-      }
       @media (max-width: 560px) {
         .features .grid {
           grid-template-columns: 1fr;
@@ -388,6 +381,7 @@ Source (and where to look if something breaks): https://github.com/buildinternet
         border: 1px solid var(--line);
         border-radius: var(--radius-md);
         padding: 12px 14px;
+        font-family: var(--mono);
         font-size: var(--text-meta);
       }
 
diff --git a/apps/web/src/styles/account-content.css b/apps/web/src/styles/account-content.css
index 9d31036a..603b7735 100644
--- a/apps/web/src/styles/account-content.css
+++ b/apps/web/src/styles/account-content.css
@@ -1279,46 +1279,6 @@ button.wft-row {
   }
 }
 
-/* Galleries empty state — the primary element when a workspace has none. */
-.ws-empty-state {
-  display: grid;
-  gap: 10px;
-  justify-items: start;
-  padding: 20px 0 8px;
-}
-.ws-empty-state__title {
-  margin: 0;
-  color: var(--fg);
-  font-size: var(--text-ui);
-  font-weight: var(--weight-semibold);
-}
-.ws-empty-state__body {
-  margin: 0;
-  max-width: 46ch;
-  color: var(--muted);
-  font-size: var(--text-meta);
-}
-.ws-empty-state .command {
-  width: 100%;
-}
-/* CTA-focused variant (galleries): centered, generous air, the create
-   command shrink-wrapped as the one visible action. */
-.ws-empty-state--cta {
-  justify-items: center;
-  text-align: center;
-  gap: 14px;
-  padding: 40px 0 32px;
-}
-.ws-empty-state--cta .command {
-  width: auto;
-  /* min-width 0: without it the nowrap command sets the grid item's
-     min-content width and overflows the card on narrow screens — the code
-     element scrolls inside instead. */
-  min-width: 0;
-  max-width: 100%;
-  border: 1px solid var(--line);
-}
-
 /* Reference commands, demoted out of the primary reading path. */
 .ws-gallery-help {
   margin-top: 20px;
diff --git a/packages/ui/src/components/ui/empty.tsx b/packages/ui/src/components/ui/empty.tsx
new file mode 100644
index 00000000..bab3115f
--- /dev/null
+++ b/packages/ui/src/components/ui/empty.tsx
@@ -0,0 +1,94 @@
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "@/lib/utils";
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn("flex max-w-sm flex-col items-center gap-2", className)}
+      {...props}
+    />
+  );
+}
+
+const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  );
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn("text-sm font-medium tracking-tight", className)}
+      {...props}
+    />
+  );
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        "flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia };
diff --git a/packages/ui/src/components/ui/kbd.tsx b/packages/ui/src/components/ui/kbd.tsx
new file mode 100644
index 00000000..44df6539
--- /dev/null
+++ b/packages/ui/src/components/ui/kbd.tsx
@@ -0,0 +1,26 @@
+import { cn } from "@/lib/utils";
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "pointer-events-none inline-flex h-5 w-fit min-w-5 items-center justify-center gap-1 rounded-sm bg-muted px-1 font-sans text-xs font-medium text-muted-foreground select-none in-data-[slot=tooltip-content]:bg-background/20 in-data-[slot=tooltip-content]:text-background dark:in-data-[slot=tooltip-content]:bg-background/10 [&_svg:not([class*='size-'])]:size-3",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  );
+}
+
+export { Kbd, KbdGroup };
diff --git a/packages/ui/src/design-sync.ts b/packages/ui/src/design-sync.ts
index 9feada59..ba0128d5 100644
--- a/packages/ui/src/design-sync.ts
+++ b/packages/ui/src/design-sync.ts
@@ -14,8 +14,10 @@ export * from "./components/ui/checkbox";
 export * from "./components/ui/combobox";
 export * from "./components/ui/dialog";
 export * from "./components/ui/dropdown-menu";
+export * from "./components/ui/empty";
 export * from "./components/ui/input";
 export * from "./components/ui/input-group";
+export * from "./components/ui/kbd";
 export * from "./components/ui/label";
 export * from "./components/ui/popover";
 export * from "./components/ui/select";
diff --git a/packages/ui/tsup.config.ts b/packages/ui/tsup.config.ts
index ab793b15..e1aa492b 100644
--- a/packages/ui/tsup.config.ts
+++ b/packages/ui/tsup.config.ts
@@ -19,8 +19,10 @@ export default defineConfig({
     "components/ui/combobox": "src/components/ui/combobox.tsx",
     "components/ui/dialog": "src/components/ui/dialog.tsx",
     "components/ui/dropdown-menu": "src/components/ui/dropdown-menu.tsx",
+    "components/ui/empty": "src/components/ui/empty.tsx",
     "components/ui/input": "src/components/ui/input.tsx",
     "components/ui/input-group": "src/components/ui/input-group.tsx",
+    "components/ui/kbd": "src/components/ui/kbd.tsx",
     "components/ui/label": "src/components/ui/label.tsx",
     "components/ui/popover": "src/components/ui/popover.tsx",
     "components/ui/select": "src/components/ui/select.tsx",