diff --git a/assets/css/app.css b/assets/css/app.css
index 1e743eb..00174ec 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -20,6 +20,18 @@
    render them in the dev/docs build. Generated by `mix shadix.gen.registry`. */
 @import "../../priv/styles/nova.css";
 
+/* The generated dialog skin uses Tailwind's fraction utilities (e.g.
+   `calc(1/2 * 100%)`) for centering. The command palette needs stable
+   cross-browser positioning because it is opened from the sticky nav. */
+#command-palette-content {
+  top: 50%;
+  left: 50%;
+  width: min(calc(100vw - 2rem), 36rem);
+  max-width: min(calc(100vw - 2rem), 36rem);
+  translate: none;
+  transform: translate(-50%, -50%);
+}
+
 @custom-variant dark (&:is(.dark *));
 
 @theme inline {
diff --git a/priv/static/assets/css/app.css b/priv/static/assets/css/app.css
index e0e7453..8fa9498 100644
--- a/priv/static/assets/css/app.css
+++ b/priv/static/assets/css/app.css
@@ -17,6 +17,7 @@
     --container-xs: 20rem;
     --container-sm: 24rem;
     --container-md: 28rem;
+    --container-xl: 36rem;
     --container-2xl: 42rem;
     --container-3xl: 48rem;
     --container-5xl: 64rem;
@@ -443,6 +444,9 @@
   .h-\[120px\] {
     height: 120px;
   }
+  .h-\[400px\] {
+    height: 400px;
+  }
   .h-\[calc\(100vh-4rem\)\] {
     height: calc(100vh - 4rem);
   }
@@ -482,6 +486,9 @@
   .w-48 {
     width: calc(var(--spacing) * 48);
   }
+  .w-52 {
+    width: calc(var(--spacing) * 52);
+  }
   .w-64 {
     width: calc(var(--spacing) * 64);
   }
@@ -533,6 +540,9 @@
   .max-w-sm {
     max-width: var(--container-sm);
   }
+  .max-w-xl {
+    max-width: var(--container-xl);
+  }
   .max-w-xs {
     max-width: var(--container-xs);
   }
@@ -725,6 +735,9 @@
   .border-border {
     border-color: var(--border);
   }
+  .border-input {
+    border-color: var(--input);
+  }
   .bg-accent {
     background-color: var(--accent);
   }
@@ -6311,6 +6324,14 @@
     }
   }
 }
+#command-palette-content {
+  top: 50%;
+  left: 50%;
+  width: min(calc(100vw - 2rem), 36rem);
+  max-width: min(calc(100vw - 2rem), 36rem);
+  translate: none;
+  transform: translate(-50%, -50%);
+}
 :root {
   --radius: 0.625rem;
   --background: oklch(1 0 0);
diff --git a/test/website/command_palette_test.exs b/test/website/command_palette_test.exs
index 49ccedb..4280412 100644
--- a/test/website/command_palette_test.exs
+++ b/test/website/command_palette_test.exs
@@ -201,6 +201,10 @@ defmodule Shadix.Website.CommandPaletteTest do
       assert has_element?(lv, "button[data-slot=command-palette-trigger]")
       assert html =~ "⌘K"
       assert html =~ ~s(phx-hook="ShadixCommandPaletteKb")
+      assert html =~ ~s(inline-flex)
+      assert html =~ ~s(rounded-md)
+      assert html =~ ~s(border-input)
+      assert html =~ ~s(justify-between)
 
       # Dialog scaffold exists (hidden by default) with the command inside.
       assert has_element?(lv, "#command-palette-root[phx-hook=ShadixDialog]")
@@ -224,6 +228,16 @@ defmodule Shadix.Website.CommandPaletteTest do
       assert html =~ "Introduction"
       assert html =~ "Button"
     end
+
+    test "command palette content has a stable centering override" do
+      css = File.read!("assets/css/app.css")
+
+      assert css =~ "#command-palette-content"
+      assert css =~ "top: 50%"
+      assert css =~ "left: 50%"
+      assert css =~ "translate: none"
+      assert css =~ "transform: translate(-50%, -50%)"
+    end
   end
 
   describe "events (live)" do
diff --git a/website/command_palette.ex b/website/command_palette.ex
index 74989a2..ee7f03f 100644
--- a/website/command_palette.ex
+++ b/website/command_palette.ex
@@ -159,6 +159,7 @@ defmodule Shadix.Website.CommandPalette do
         phx-hook="ShadixCommandPaletteKb"
         phx-click={show_dialog("command-palette")}
         aria-label="Search docs"
+        class="inline-flex h-9 w-52 items-center justify-between gap-2 rounded-md border border-input bg-background px-3 text-sm text-muted-foreground shadow-xs transition-colors hover:bg-accent hover:text-accent-foreground"
       >
         <svg viewBox="0 0 24 24" class="size-4" fill="none" stroke="currentColor" stroke-width="2">
           <circle cx="11" cy="11" r="8" />