diff --git a/docs-app/app/components/docs-search.gts b/docs-app/app/components/docs-search.gts
new file mode 100644
index 000000000..948c636c7
--- /dev/null
+++ b/docs-app/app/components/docs-search.gts
@@ -0,0 +1,232 @@
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { registerDestructor } from '@ember/destroyable';
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { service } from '@ember/service';
+
+import { CommandPalette } from 'ember-primitives';
+import { docsManager } from 'kolay';
+
+import type RouterService from '@ember/routing/router-service';
+import type { Page } from 'kolay';
+
+interface PageData {
+  path: string;
+  title: string;
+  category: string;
+}
+
+function titleize(str: string): string {
+  return (
+    str
+      .split(/-|\s/)
+      .filter(Boolean)
+      .filter((text) => !text.match(/^[\d]+$/))
+      .map((text) => `${text[0]?.toLocaleUpperCase()}${text.slice(1, text.length)}`)
+      .join(' ')
+      .split('.')[0] || ''
+  );
+}
+
+function extractPages(pages: Page[], category = ''): PageData[] {
+  const result: PageData[] = [];
+
+  for (const page of pages) {
+    if ('path' in page) {
+      let title = titleize(page.name);
+
+      if ('title' in page && typeof page.title === 'string') {
+        title = page.title;
+      }
+
+      result.push({
+        path: page.path,
+        title,
+        category: category || 'Documentation',
+      });
+    }
+
+    if ('pages' in page && Array.isArray(page.pages)) {
+      result.push(...extractPages(page.pages as Page[], titleize(page.name)));
+    }
+  }
+
+  return result;
+}
+
+export class DocsSearch extends Component {
+  @service declare router: RouterService;
+
+  @tracked searchQuery = '';
+
+  @tracked isOpen = false;
+
+  constructor(owner: unknown, args: unknown) {
+    super(owner as never, args as never);
+
+    // In docs-app we want Cmd/Ctrl+K to open globally (regardless of focus).
+    // Use a window listener (capture phase) so we can prevent the browser's default behavior.
+    if (typeof window === 'undefined') return;
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.defaultPrevented) return;
+      if (event.isComposing) return;
+
+      if (event.altKey || event.shiftKey) return;
+      if (!(event.metaKey || event.ctrlKey)) return;
+
+      // Prefer `key` (layout-aware); fall back to `code`.
+      const isK = event.key?.toLowerCase() === 'k' || event.code === 'KeyK';
+
+      if (!isK) return;
+
+      event.preventDefault();
+      event.stopPropagation();
+      event.stopImmediatePropagation();
+
+      if (this.isOpen) {
+        this.close();
+      } else {
+        this.open();
+      }
+    };
+
+    // `true` => capture phase
+    window.addEventListener('keydown', onKeyDown, true);
+
+    registerDestructor(this, () => {
+      window.removeEventListener('keydown', onKeyDown, true);
+    });
+  }
+
+  get allPages(): PageData[] {
+    const m = docsManager(this);
+
+    if (!m) return [];
+
+    return extractPages(m.pages || []);
+  }
+
+  get filteredPages(): PageData[] {
+    if (!this.searchQuery) {
+      return this.allPages.slice(0, 10); // Show first 10 when no query
+    }
+
+    const query = this.searchQuery.toLowerCase();
+
+    return this.allPages
+      .filter(
+        (page) =>
+          page.title.toLowerCase().includes(query) ||
+          page.path.toLowerCase().includes(query) ||
+          page.category.toLowerCase().includes(query)
+      )
+      .slice(0, 10); // Limit to 10 results
+  }
+
+  handleInput = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+
+    this.searchQuery = target.value;
+  };
+
+  selectPage = (page: PageData) => {
+    this.router.transitionTo(page.path);
+    this.searchQuery = '';
+    this.isOpen = false;
+  };
+
+  open = () => {
+    this.isOpen = true;
+  };
+
+  close = () => {
+    this.isOpen = false;
+    this.searchQuery = '';
+  };
+
+  <template>
+    <button
+      type="button"
+      class="trigger group flex items-center gap-2 px-3 py-1.5 text-sm text-slate-500 transition bg-white dark:bg-slate-800 border border-slate-300 dark:border-slate-600 rounded-md hover:border-slate-400 dark:hover:border-slate-500 focus:outline-none focus:ring-2 focus:ring-sky-500"
+      {{on "click" this.open}}
+      aria-label="Search documentation"
+    >
+      <svg
+        class="w-4 h-4"
+        fill="none"
+        stroke="currentColor"
+        viewBox="0 0 24 24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
+        ></path>
+      </svg>
+      <span class="hidden sm:inline">Search docs...</span>
+      <kbd
+        class="hidden ml-auto text-xs font-semibold text-slate-400 sm:inline-flex items-center gap-0.5"
+      >
+        <abbr title="Command" class="no-underline">⌘</abbr>K
+      </kbd>
+    </button>
+
+    <CommandPalette @open={{this.isOpen}} @onClose={{this.close}} as |cp|>
+      <cp.Dialog class="dialog">
+        <div class="flex flex-col max-h-[60vh] bg-white dark:bg-slate-900 rounded-lg">
+          <cp.Input
+            class="w-full px-4 py-3 text-base border-b border-slate-200 dark:border-slate-700 bg-transparent text-slate-900 dark:text-slate-100 focus:outline-none placeholder-slate-400"
+            placeholder="Search documentation..."
+            value={{this.searchQuery}}
+            {{on "input" this.handleInput}}
+          />
+
+          <cp.List class="overflow-y-auto px-2 py-2 max-h-[400px] focus:outline-none" tabindex="0">
+            {{#if this.filteredPages.length}}
+              {{#each this.filteredPages as |page|}}
+                <cp.Item
+                  class="flex flex-col px-3 py-2 rounded cursor-pointer focus:bg-slate-100 dark:focus:bg-slate-800 focus:outline-none hover:bg-slate-50 dark:hover:bg-slate-800/50"
+                  @onSelect={{fn this.selectPage page}}
+                >
+                  <div class="font-medium text-slate-900 dark:text-slate-100">
+                    {{page.title}}
+                  </div>
+                  <div class="text-xs text-slate-500 dark:text-slate-400">
+                    {{page.category}}
+                    •
+                    {{page.path}}
+                  </div>
+                </cp.Item>
+              {{/each}}
+            {{else}}
+              <div class="px-3 py-8 text-center text-slate-500 dark:text-slate-400">
+                {{#if this.searchQuery}}
+                  No results found for "{{this.searchQuery}}"
+                {{else}}
+                  Start typing to search...
+                {{/if}}
+              </div>
+            {{/if}}
+          </cp.List>
+        </div>
+      </cp.Dialog>
+    </CommandPalette>
+
+    <style scoped>
+      .trigger {
+      }
+      .dialog {
+        position: absolute;
+        top: 0.75rem;
+        /* margin-top: -2.5rem; */
+        border-radius: 0.25rem;
+        border: 1px solid;
+        filter: drop-shadow(0px 1rem 1rem rgba(0, 0, 0, 0.5));
+      }
+    </style>
+  </template>
+}
diff --git a/docs-app/app/templates/page.gts b/docs-app/app/templates/page.gts
index 5e11cbf3c..afc2e50fc 100644
--- a/docs-app/app/templates/page.gts
+++ b/docs-app/app/templates/page.gts
@@ -1,5 +1,6 @@
 import Component from '@glimmer/component';
 
+import { DocsSearch } from 'docs-app/components/docs-search';
 import { GitHubLink, TestsLink } from 'docs-app/components/header';
 import { Logo, Logomark } from 'docs-app/components/icons';
 import { ExternalLink } from 'ember-primitives';
@@ -17,6 +18,9 @@ export default class Page extends Component {
         <Logomark class="h-9 w-28 lg:hidden" />
         <Logo class="hidden w-auto h-9 fill-slate-700 lg:block dark:fill-sky-100" />
       </:logoLink>
+      <:search>
+        <DocsSearch />
+      </:search>
       <:topRight>
         <TestsLink />
         <GitHubLink />
diff --git a/docs-app/package.json b/docs-app/package.json
index 213c788d1..78338d71c 100644
--- a/docs-app/package.json
+++ b/docs-app/package.json
@@ -35,6 +35,7 @@
     "decorator-transforms": "^2.3.0",
     "ember-element-helper": "^0.8.8",
     "ember-focus-trap": "^1.1.0",
+    "ember-keyboard": "^9.0.4",
     "ember-mobile-menu": "^6.0.0",
     "ember-modifier": "^4.2.2",
     "ember-primitives": "workspace:^",
diff --git a/docs-app/public/docs/5-floaty-bits/command-palette.md b/docs-app/public/docs/5-floaty-bits/command-palette.md
new file mode 100644
index 000000000..b8b1f5ea6
--- /dev/null
+++ b/docs-app/public/docs/5-floaty-bits/command-palette.md
@@ -0,0 +1,402 @@
+# Command Palette
+
+A command palette is a modal dialog that provides quick access to commands and actions through a searchable interface. It's a common pattern in modern applications for power users to navigate and execute actions quickly via keyboard.
+
+The `<CommandPalette>` component is built with the `<Dialog>` primitive and provides keyboard navigation via Tabster. It follows the [WAI-ARIA Combobox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) for accessibility.
+
+## Features
+
+- **Styleless**: No CSS shipped; only structure, semantics, and state management
+- **Accessible**: Proper ARIA roles and attributes for screen readers
+- **Keyboard Navigation**: Arrow keys navigate through items, Escape closes the palette
+- **Focus Management**: Focus is trapped within the dialog when open and returned to the trigger when closed
+- **Composable**: Build your own search/filtering logic with full control over rendering
+
+## Example
+
+<div class="featured-demo">
+
+```gjs live preview no-shadow
+import { CommandPalette } from 'ember-primitives';
+import { on } from '@ember/modifier';
+import { tracked } from '@glimmer/tracking';
+
+class Demo {
+  @tracked searchQuery = '';
+
+  commands = [
+    { id: 1, name: 'Create new file', category: 'File' },
+    { id: 2, name: 'Open file', category: 'File' },
+    { id: 3, name: 'Save file', category: 'File' },
+    { id: 4, name: 'Search in files', category: 'Search' },
+    { id: 5, name: 'Find and replace', category: 'Search' },
+    { id: 6, name: 'Toggle sidebar', category: 'View' },
+    { id: 7, name: 'Toggle terminal', category: 'View' },
+  ];
+
+  get filteredCommands() {
+    if (!this.searchQuery) {
+      return this.commands;
+    }
+
+    const query = this.searchQuery.toLowerCase();
+    return this.commands.filter(cmd => 
+      cmd.name.toLowerCase().includes(query) ||
+      cmd.category.toLowerCase().includes(query)
+    );
+  }
+
+  handleInput = (event) => {
+    this.searchQuery = event.target.value;
+  };
+
+  selectCommand = (command) => {
+    console.log('Selected:', command.name);
+  };
+}
+
+const state = new Demo();
+
+<template>
+  <CommandPalette as |cp|>
+    <button 
+      type="button" 
+      class="trigger" 
+      {{on "click" cp.open}} 
+      {{cp.focusOnClose}}
+    >
+      Open Command Palette (Cmd+K)
+    </button>
+
+    <cp.Dialog class="dialog-wrapper">
+      <div class="palette">
+        <cp.Input 
+          class="search-input"
+          placeholder="Type a command or search..." 
+          value={{state.searchQuery}}
+          {{on "input" state.handleInput}}
+        />
+        
+        <cp.List class="command-list">
+          {{#if state.filteredCommands.length}}
+            {{#each state.filteredCommands as |command|}}
+              <cp.Item 
+                class="command-item"
+                @onSelect={{fn state.selectCommand command}}
+              >
+                <div class="command-name">{{command.name}}</div>
+                <div class="command-category">{{command.category}}</div>
+              </cp.Item>
+            {{/each}}
+          {{else}}
+            <div class="no-results">No commands found</div>
+          {{/if}}
+        </cp.List>
+      </div>
+    </cp.Dialog>
+  </CommandPalette>
+
+  <style>
+    .trigger {
+      padding: 8px 16px;
+      background: #fff;
+      border: 1px solid #d1d5db;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 14px;
+      box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
+    }
+
+    .trigger:hover {
+      background: #f9fafb;
+    }
+
+    dialog {
+      padding: 0;
+      border: none;
+      border-radius: 12px;
+      box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
+      max-width: 600px;
+      width: 90vw;
+    }
+
+    dialog::backdrop {
+      background: rgba(0, 0, 0, 0.5);
+      backdrop-filter: blur(4px);
+    }
+
+    .dialog-wrapper {
+      display: flex;
+      flex-direction: column;
+      max-height: 60vh;
+    }
+
+    .palette {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .search-input {
+      all: unset;
+      padding: 16px 20px;
+      font-size: 16px;
+      border-bottom: 1px solid #e5e7eb;
+    }
+
+    .search-input::placeholder {
+      color: #9ca3af;
+    }
+
+    .command-list {
+      all: unset;
+      display: flex;
+      flex-direction: column;
+      overflow-y: auto;
+      max-height: 400px;
+      padding: 8px 0;
+    }
+
+    .command-item {
+      all: unset;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 12px 20px;
+      cursor: pointer;
+    }
+
+    .command-item:focus {
+      background: #f3f4f6;
+      outline: none;
+    }
+
+    .command-name {
+      font-size: 14px;
+      color: #111827;
+    }
+
+    .command-category {
+      font-size: 12px;
+      color: #6b7280;
+      background: #f3f4f6;
+      padding: 2px 8px;
+      border-radius: 4px;
+    }
+
+    .no-results {
+      padding: 20px;
+      text-align: center;
+      color: #6b7280;
+      font-size: 14px;
+    }
+  </style>
+</template>
+```
+
+</div>
+
+## API
+
+### `<CommandPalette>`
+
+The root component that manages the command palette state.
+
+#### Arguments
+
+- `@open` (optional, `boolean`) - Set the initial open state of the command palette
+- `@onClose` (optional, `() => void`) - Callback invoked when the palette is closed
+
+#### Yields
+
+- `isOpen` (`boolean`) - Current open state of the palette
+- `open` (`() => void`) - Function to open the palette
+- `close` (`() => void`) - Function to close the palette
+- `focusOnClose` (`Modifier`) - Modifier to apply to the trigger element for focus management
+- `Dialog` (`Component`) - Dialog wrapper component
+- `Input` (`Component`) - Search input component
+- `List` (`Component`) - List container component
+- `Item` (`Component`) - Individual item component
+
+### `<cp.Dialog>`
+
+The dialog wrapper for the command palette. Wraps the `<dialog>` element.
+
+### `<cp.Input>`
+
+The search input element with proper ARIA attributes for the combobox pattern.
+
+#### Attributes
+
+All standard `<input>` attributes are supported (e.g., `placeholder`, `value`).
+
+### `<cp.List>`
+
+The container for command palette items. Handles keyboard navigation via Tabster.
+
+### `<cp.Item>`
+
+An individual item in the command palette.
+
+#### Arguments
+
+- `@onSelect` (optional, `(event: Event) => void`) - Callback invoked when the item is selected
+
+## Keyboard Interaction
+
+- **Arrow Down**: Move focus to the next item (cycles to first when at end)
+- **Arrow Up**: Move focus to the previous item (cycles to last when at beginning)
+- **Tab**: Move focus between input and list
+- **Escape**: Close the command palette
+- **Click**: Select an item and close the palette
+
+## Accessibility
+
+The Command Palette follows the [ARIA Combobox Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) with the following features:
+
+- `role="combobox"` on the input element
+- `role="listbox"` on the list container
+- `role="option"` on each item
+- `aria-controls` linking input to list
+- `aria-labelledby` linking list to input
+- `aria-expanded` indicating open state
+- Focus trap within the dialog when open
+- Focus restoration to trigger when closed
+
+## Examples
+
+### Basic Usage
+
+```gjs
+import { CommandPalette } from 'ember-primitives';
+import { on } from '@ember/modifier';
+
+<template>
+  <CommandPalette as |cp|>
+    <button {{on "click" cp.open}} {{cp.focusOnClose}}>
+      Open Commands
+    </button>
+
+    <cp.Dialog>
+      <cp.Input placeholder="Search commands..." />
+      <cp.List>
+        <cp.Item>New File</cp.Item>
+        <cp.Item>Open File</cp.Item>
+        <cp.Item>Save</cp.Item>
+      </cp.List>
+    </cp.Dialog>
+  </CommandPalette>
+</template>
+```
+
+### With Search Filtering
+
+```gjs
+import { CommandPalette } from 'ember-primitives';
+import { on } from '@ember/modifier';
+import { tracked } from '@glimmer/tracking';
+
+class MyComponent {
+  @tracked query = '';
+
+  commands = ['New File', 'Open File', 'Save', 'Close'];
+
+  get filtered() {
+    return this.commands.filter(cmd => 
+      cmd.toLowerCase().includes(this.query.toLowerCase())
+    );
+  }
+
+  handleInput = (e) => {
+    this.query = e.target.value;
+  };
+}
+
+const state = new MyComponent();
+
+<template>
+  <CommandPalette as |cp|>
+    <button {{on "click" cp.open}} {{cp.focusOnClose}}>Commands</button>
+
+    <cp.Dialog>
+      <cp.Input 
+        placeholder="Search..." 
+        value={{state.query}}
+        {{on "input" state.handleInput}}
+      />
+      <cp.List>
+        {{#each state.filtered as |cmd|}}
+          <cp.Item>{{cmd}}</cp.Item>
+        {{/each}}
+      </cp.List>
+    </cp.Dialog>
+  </CommandPalette>
+</template>
+```
+
+### With Selection Handler
+
+```gjs
+import { CommandPalette } from 'ember-primitives';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+
+function handleSelect(commandId) {
+  console.log('Selected:', commandId);
+  // Execute command logic here
+}
+
+<template>
+  <CommandPalette as |cp|>
+    <button {{on "click" cp.open}} {{cp.focusOnClose}}>Commands</button>
+
+    <cp.Dialog>
+      <cp.Input placeholder="Search..." />
+      <cp.List>
+        <cp.Item @onSelect={{fn handleSelect "new"}}>New File</cp.Item>
+        <cp.Item @onSelect={{fn handleSelect "open"}}>Open File</cp.Item>
+        <cp.Item @onSelect={{fn handleSelect "save"}}>Save</cp.Item>
+      </cp.List>
+    </cp.Dialog>
+  </CommandPalette>
+</template>
+```
+
+### Controlled Open State
+
+```gjs
+import { CommandPalette } from 'ember-primitives';
+import { tracked } from '@glimmer/tracking';
+
+class Controller {
+  @tracked isOpen = false;
+
+  open = () => { this.isOpen = true; };
+  close = () => { this.isOpen = false; };
+}
+
+const state = new Controller();
+
+<template>
+  <button {{on "click" state.open}}>Open</button>
+
+  <CommandPalette @open={{state.isOpen}} @onClose={{state.close}} as |cp|>
+    <cp.Dialog>
+      <cp.Input placeholder="Search..." />
+      <cp.List>
+        <cp.Item>Command 1</cp.Item>
+        <cp.Item>Command 2</cp.Item>
+      </cp.List>
+    </cp.Dialog>
+  </CommandPalette>
+</template>
+```
+
+## Implementation Notes
+
+- The Command Palette is built on top of the native `<dialog>` element, providing native modal behavior
+- Keyboard navigation is powered by [Tabster](https://tabster.io/), which handles focus movement between items
+- The component is completely styleless - you have full control over the appearance
+- Search/filtering logic is not built-in, allowing you to implement custom filtering strategies
+- Focus is automatically moved to the input when the palette opens
+- The palette closes automatically when an item is selected or when Escape is pressed
diff --git a/ember-primitives/package.json b/ember-primitives/package.json
index e9e97a115..76f77e605 100644
--- a/ember-primitives/package.json
+++ b/ember-primitives/package.json
@@ -42,6 +42,7 @@
     "@floating-ui/dom": "^1.7.0",
     "decorator-transforms": "^2.3.0",
     "ember-element-helper": "^0.8.8",
+    "ember-focus-trap": "^1.1.1",
     "form-data-utils": "^0.6.0",
     "reactiveweb": "^1.9.1",
     "should-handle-link": "^1.2.2",
diff --git a/ember-primitives/src/components/command-palette.gts b/ember-primitives/src/components/command-palette.gts
new file mode 100644
index 000000000..baa95f92f
--- /dev/null
+++ b/ember-primitives/src/components/command-palette.gts
@@ -0,0 +1,265 @@
+/**
+ * Command Palette Component
+ *
+ * A modal dialog-based command palette with search input and keyboard-navigable list.
+ *
+ * References:
+ * - https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
+ * - https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
+ *
+ * Keyboard behaviors provided by tabster:
+ * - Arrow keys navigate between items
+ * - Escape closes the palette
+ * - Focus is trapped within the dialog
+ */
+
+import Component from "@glimmer/component";
+import { hash } from "@ember/helper";
+import { on } from "@ember/modifier";
+import { guidFor } from "@ember/object/internals";
+
+// @ts-expect-error, really, no types?
+import { focusTrap } from "ember-focus-trap";
+import { modifier as eModifier } from "ember-modifier";
+import { getTabsterAttribute, MoverDirections } from "tabster";
+
+import { Dialog } from "./dialog.gts";
+
+import type { Signature as DialogSignature } from "./dialog.gts";
+import type { TOC } from "@ember/component/template-only";
+import type { ModifierLike, WithBoundArgs } from "@glint/template";
+import Menu from "./menu.gts";
+
+const TABSTER_CONFIG_LIST = getTabsterAttribute(
+  {
+    mover: {
+      direction: MoverDirections.Vertical,
+      cyclic: true,
+    },
+  },
+  true,
+);
+
+export interface Signature {
+  Args: {
+    /**
+     * Optionally set the open state of the command palette
+     * The state will still be managed internally,
+     * so this does not need to be a maintained value, but whenever it changes,
+     * the dialog element will reflect that change accordingly.
+     */
+    open?: boolean;
+    /**
+     * When the command palette is closed, this function will be called
+     */
+    onClose?: () => void;
+  };
+  Blocks: {
+    default: [
+      {
+        /**
+         * Represents the open state of the command palette
+         */
+        isOpen: boolean;
+
+        /**
+         * Closes the command palette
+         */
+        close: () => void;
+
+        /**
+         * Opens the command palette
+         */
+        open: () => void;
+
+        /**
+         * This modifier should be applied to the button that opens the command palette
+         * so that it can be re-focused when the palette closes.
+         */
+        focusOnClose: ModifierLike<{ Element: HTMLElement }>;
+
+        /**
+         * The dialog element wrapper for the command palette
+         */
+        Dialog: WithBoundArgs<typeof CommandPaletteDialog, "state" | "dialogProps">;
+
+        /**
+         * The input element for search/filtering
+         */
+        Input: WithBoundArgs<typeof CommandPaletteInput, "state" | "inputId" | "listId">;
+
+        /**
+         * The list container for command items
+         */
+        List: WithBoundArgs<typeof CommandPaletteList, "state" | "listId" | "inputId">;
+
+        /**
+         * Individual command items
+         */
+        Item: WithBoundArgs<typeof CommandPaletteItem, "state">;
+      },
+    ];
+  };
+}
+
+type CommandPaletteState = ReturnType<typeof createCommandPaletteState>;
+
+interface PrivateItemSignature {
+  Element: HTMLDivElement;
+  Args: {
+    state: CommandPaletteState;
+    onSelect?: (event: Event) => void;
+  };
+  Blocks: { default: [] };
+}
+
+export interface ItemSignature {
+  Element: PrivateItemSignature["Element"];
+  Args: Omit<PrivateItemSignature["Args"], "state">;
+  Blocks: PrivateItemSignature["Blocks"];
+}
+
+/**
+ * We focus items on `pointerMove` to achieve the following:
+ *
+ * - Mouse over an item (it focuses)
+ * - Leave mouse where it is and use keyboard to focus a different item
+ * - Wiggle mouse without it leaving previously focused item
+ * - Previously focused item should re-focus
+ *
+ * If we used `mouseOver`/`mouseEnter` it would not re-focus when the mouse
+ * wiggles. This is to match native menu implementation.
+ */
+function focusOnHover(e: PointerEvent) {
+  const item = e.currentTarget;
+
+  if (item instanceof HTMLElement) {
+    item.focus();
+  }
+}
+
+const CommandPaletteItem: TOC<PrivateItemSignature> = <template>
+  {{! @glint-expect-error }}
+  {{#let (if @onSelect (modifier on "click" @onSelect)) as |maybeClick|}}
+    <div
+      role="option"
+      tabindex="-1"
+      aria-selected="false"
+      {{! @glint-expect-error }}
+      {{maybeClick}}
+      {{on "click" @state.close}}
+      {{on "pointermove" focusOnHover}}
+      ...attributes
+    >
+      {{yield}}
+    </div>
+  {{/let}}
+</template>;
+
+interface PrivateListSignature {
+  Element: HTMLDivElement;
+  Args: {
+    state: CommandPaletteState;
+    listId: string;
+    inputId: string;
+  };
+  Blocks: { default: [] };
+}
+
+export interface ListSignature {
+  Element: PrivateListSignature["Element"];
+  Blocks: PrivateListSignature["Blocks"];
+}
+
+const CommandPaletteList: TOC<PrivateListSignature> = <template>
+  <div
+    role="listbox"
+    id={{@listId}}
+    data-tabster={{TABSTER_CONFIG_LIST}}
+    aria-labelledby={{@inputId}}
+    tabindex="0"
+    ...attributes
+  >
+    {{yield}}
+  </div>
+</template>;
+
+interface PrivateInputSignature {
+  Element: HTMLInputElement;
+  Args: {
+    state: CommandPaletteState;
+    inputId: string;
+    listId: string;
+  };
+  Blocks: Record<string, never>;
+}
+
+export interface InputSignature {
+  Element: PrivateInputSignature["Element"];
+}
+
+const focusInput = eModifier<{ Element: HTMLInputElement }>((element) => {
+  requestAnimationFrame(() => {
+    element.focus();
+  });
+});
+
+const CommandPaletteInput: TOC<PrivateInputSignature> = <template>
+  <input
+    type="text"
+    role="combobox"
+    id={{@inputId}}
+    aria-controls={{@listId}}
+    aria-expanded="true"
+    aria-autocomplete="list"
+    autocomplete="off"
+    {{focusInput}}
+    ...attributes
+  />
+</template>;
+
+const CommandPaletteDialog: TOC<{
+  Element: HTMLDivElement;
+  Args: {
+    dialog: DialogSignature["Blocks"]["default"][0];
+  };
+  Blocks: { default: [] };
+}> = <template>
+  <@dialog.Dialog
+    ...attributes
+    {{focusTrap isActive=@dialog.isOpen focusTrapOptions=focusTrapOptions}}
+  >
+    {{yield}}
+  </@dialog.Dialog>
+</template>;
+
+const focusTrapOptions = {
+  clickOutsideDeactivates: true,
+  allowOutsideClick: true,
+};
+
+export class CommandPalette extends Component<Signature> {
+  guid = guidFor(this);
+  inputId = `command-palette-input-${this.guid}`;
+  listId = `command-palette-list-${this.guid}`;
+
+  <template>
+    <Dialog as |dialog|>
+      {{yield
+        (hash
+          isOpen=dialog.isOpen
+          open=dialog.open
+          close=dialog.close
+          focusOnClose=dialog.focusOnClose
+          Dialog=(component CommandPaletteDialog dialog=dialog)
+          Input=(component CommandPaletteInput inputId=this.inputId listId=this.listId)
+          List=(component CommandPaletteList state=dialog listId=this.listId inputId=this.inputId)
+          Item=(component CommandPaletteItem state=dialog)
+        )
+      }}
+
+    </Dialog>
+  </template>
+}
+
+export default CommandPalette;
diff --git a/ember-primitives/src/components/menu.gts b/ember-primitives/src/components/menu.gts
index 00ef3ccc8..b2864cd4a 100644
--- a/ember-primitives/src/components/menu.gts
+++ b/ember-primitives/src/components/menu.gts
@@ -102,7 +102,6 @@ const Item: TOC<PrivateItemSignature> = <template>
     <button
       type="button"
       role="menuitem"
-      {{! @glint-expect-error }}
       {{maybeClick}}
       {{on "click" @toggle}}
       {{on "pointermove" focusOnHover}}
diff --git a/ember-primitives/src/index.ts b/ember-primitives/src/index.ts
index 0c203be7f..e26f0e766 100644
--- a/ember-primitives/src/index.ts
+++ b/ember-primitives/src/index.ts
@@ -19,6 +19,7 @@ export type {
   AccordionTriggerExternalSignature,
 } from './components/accordion/public.ts';
 export { Avatar } from './components/avatar.gts';
+export { CommandPalette } from './components/command-palette.gts';
 export { Dialog, Dialog as Modal } from './components/dialog.gts';
 export { ExternalLink } from './components/external-link.gts';
 export { Form } from './components/form.gts';
diff --git a/packages/docs-support/src/page-layout.gts b/packages/docs-support/src/page-layout.gts
index 163791fea..6e8e9f988 100644
--- a/packages/docs-support/src/page-layout.gts
+++ b/packages/docs-support/src/page-layout.gts
@@ -15,7 +15,6 @@ function removeLoader() {
   document.querySelector('#initial-loader')?.remove();
 }
 
- 
 function resetScroll(..._args: unknown[]) {
   document.querySelector('html')?.scrollTo(0, 0);
 }
@@ -38,6 +37,7 @@ const onWindowScroll = modifier(() => {
 export const PageLayout: TOC<{
   Blocks: {
     logoLink: [];
+    search: [];
     topRight: [];
     editLink: [typeof EditLink];
     error: [error: string];
@@ -63,12 +63,9 @@ export const PageLayout: TOC<{
               {{yield to="logoLink"}}
             </a>
           </div>
-          {{!
-            If we ever have a search bar
-              <div class="mr-6 -my-5 sm:mr-8 md:mr-0">
-                  input here
-              </div>
-            }}
+          <div class="flex-grow flex items-center justify-center">
+            {{yield to="search"}}
+          </div>
           <TopRight>
             {{yield to="topRight"}}
           </TopRight>
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 94e1f2090..070458cab 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -111,6 +111,9 @@ importers:
       ember-focus-trap:
         specifier: ^1.1.0
         version: 1.1.1(b029c899f654588945b06575ccae3ff4)
+      ember-keyboard:
+        specifier: ^9.0.4
+        version: 9.0.4(c19ce2e3cf0f61e9fef32bb529026185)
       ember-mobile-menu:
         specifier: ^6.0.0
         version: 6.0.0(d355cea645735bff734896a608233b30)
@@ -394,6 +397,9 @@ importers:
       ember-element-helper:
         specifier: ^0.8.8
         version: 0.8.8
+      ember-focus-trap:
+        specifier: ^1.1.1
+        version: 1.1.1(b029c899f654588945b06575ccae3ff4)
       form-data-utils:
         specifier: ^0.6.0
         version: 0.6.0
@@ -681,6 +687,9 @@ importers:
 
   test-app:
     dependencies:
+      '@babel/runtime':
+        specifier: ^7.28.4
+        version: 7.28.4
       decorator-transforms:
         specifier: ^2.3.0
         version: 2.3.1(@babel/core@7.28.5)
@@ -715,9 +724,6 @@ importers:
       '@babel/plugin-transform-typescript':
         specifier: ^7.28.5
         version: 7.28.5(@babel/core@7.28.5)
-      '@babel/runtime':
-        specifier: ^7.28.4
-        version: 7.28.4
       '@ember/app-tsconfig':
         specifier: ^1.0.0
         version: 1.0.3
@@ -4691,6 +4697,14 @@ packages:
       '@ember/test-helpers':
         optional: true
 
+  ember-keyboard@9.0.4:
+    resolution: {integrity: sha512-lReOVCwvPt8aTLynuyh1rVoZx9LITqcwdCiUltGMkoJNyuE8snuGMIEpEj3RtiPLWm0UCnTfod8bjEqOoEEFtA==}
+    peerDependencies:
+      '@ember/test-helpers': ^2.6.0 || ^3.0.0 || >= 4.0.0
+    peerDependenciesMeta:
+      '@ember/test-helpers':
+        optional: true
+
   ember-load-initializers@3.0.1:
     resolution: {integrity: sha512-qV3vxJKw5+7TVDdtdLPy8PhVsh58MlK8jwzqh5xeOwJPNP7o0+BlhvwoIlLYTPzGaHdfjEIFCgVSyMRGd74E1g==}
     engines: {node: '>= 18.*'}
@@ -14885,6 +14899,16 @@ snapshots:
       - '@babel/core'
       - supports-color
 
+  ember-keyboard@9.0.4(c19ce2e3cf0f61e9fef32bb529026185):
+    dependencies:
+      '@embroider/addon-shim': 1.10.2
+      ember-modifier: 4.2.2(@babel/core@7.28.5)
+    optionalDependencies:
+      '@ember/test-helpers': 5.4.1(41dbc40bfe763063746c2ae01dde51bb)
+    transitivePeerDependencies:
+      - '@babel/core'
+      - supports-color
+
   ember-load-initializers@3.0.1(b029c899f654588945b06575ccae3ff4):
     dependencies:
       ember-source: 6.9.0(@glimmer/component@2.0.0)(rsvp@4.8.5)
diff --git a/test-app/package.json b/test-app/package.json
index 0dcabd246..b102c9e4c 100644
--- a/test-app/package.json
+++ b/test-app/package.json
@@ -27,6 +27,7 @@
     "test:ember": "vite build --mode development && ember test --path dist"
   },
   "dependencies": {
+    "@babel/runtime": "^7.28.4",
     "decorator-transforms": "^2.3.0",
     "ember-primitives": "workspace:^",
     "ember-resources": "^7.0.7",
diff --git a/test-app/tests/command-palette/command-palette-rendering-test.gts b/test-app/tests/command-palette/command-palette-rendering-test.gts
new file mode 100644
index 000000000..a2ada2e87
--- /dev/null
+++ b/test-app/tests/command-palette/command-palette-rendering-test.gts
@@ -0,0 +1,384 @@
+import { assert as debugAssert } from '@ember/debug';
+import { fn } from '@ember/helper';
+import { on } from '@ember/modifier';
+import { click, find, findAll, render, settled, triggerKeyEvent } from '@ember/test-helpers';
+import { module, test } from 'qunit';
+import { setupRenderingTest } from 'ember-qunit';
+
+import { CommandPalette } from 'ember-primitives';
+import { setupTabster } from 'ember-primitives/test-support';
+
+module('Rendering | command-palette', function (hooks) {
+  setupRenderingTest(hooks);
+  setupTabster(hooks);
+
+  async function closeDialog() {
+    // We don't need to test "escape" because the browser already has
+    // tests for that for us. So we can instead call the dialog's close method
+    find('dialog')?.close();
+    // NOTE: headless chrome has either:
+    //       inconsistent timings, or is so fast, we actually do have a timing issue.
+    //       TODO: consider how to tie the waiter system to the dialog close status
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    await settled();
+  }
+
+  function assertFind(selector: string) {
+    const el = find(selector);
+
+    debugAssert(`Expected ${selector} to exist`, el);
+
+    return el;
+  }
+
+  test('can be opened and closed', async function (assert) {
+    await render(
+      <template>
+        <CommandPalette as |cp|>
+          <button id="trigger" type="button" {{on "click" cp.open}} {{cp.focusOnClose}}>
+            Open Command Palette
+          </button>
+
+          <cp.Dialog>
+            <cp.Input placeholder="Search..." />
+            <cp.List>
+              <cp.Item>Item 1</cp.Item>
+              <cp.Item>Item 2</cp.Item>
+            </cp.List>
+          </cp.Dialog>
+        </CommandPalette>
+      </template>
+    );
+
+    assert.dom('dialog').exists();
+    assert.dom('dialog').hasStyle({ display: 'none' });
+
+    await click('#trigger');
+
+    assert.dom('dialog').hasStyle({ display: 'block' });
+    assert.dom('input[role="combobox"]').exists();
+    assert.dom('input[role="combobox"]').isFocused();
+
+    await closeDialog();
+
+    assert.dom('dialog').hasStyle({ display: 'none' });
+    assert.strictEqual(document.activeElement, assertFind('#trigger'));
+  });
+
+  test('input has correct ARIA attributes', async function (assert) {
+    await render(
+      <template>
+        <CommandPalette as |cp|>
+          <button type="button" {{on "click" cp.open}} {{cp.focusOnClose}}>
+            Open
+          </button>
+
+          <cp.Dialog>
+            <cp.Input placeholder="Search..." />
+            <cp.List>
+              <cp.Item>Item 1</cp.Item>
+            </cp.List>
+          </cp.Dialog>
+        </CommandPalette>
+      </template>
+    );
+
+    await click('button');
+
+    const input = assertFind('input[role="combobox"]');
+    const list = assertFind('[role="listbox"]');
+
+    debugAssert('Input must have an id', input.id);
+    debugAssert('List must have an id', list.id);
+
+    assert.dom(input).hasAttribute('role', 'combobox');
+    assert.dom(input).hasAttribute('aria-controls', list.id);
+    assert.dom(input).hasAttribute('aria-expanded', 'true');
+    assert.dom(input).hasAttribute('aria-autocomplete', 'list');
+    assert.dom(input).hasAttribute('autocomplete', 'off');
+  });
+
+  test('list has correct ARIA attributes', async function (assert) {
+    await render(
+      <template>
+        <CommandPalette as |cp|>
+          <button type="button" {{on "click" cp.open}} {{cp.focusOnClose}}>
+            Open
+          </button>
+
+          <cp.Dialog>
+            <cp.Input placeholder="Search..." />
+            <cp.List>
+              <cp.Item>Item 1</cp.Item>
+              <cp.Item>Item 2</cp.Item>
+            </cp.List>
+          </cp.Dialog>
+        </CommandPalette>
+      </template>
+    );
+
+    await click('button');
+
+    const input = assertFind('input[role="combobox"]');
+    const list = assertFind('[role="listbox"]');
+
+    assert.dom(list).hasAttribute('role', 'listbox');
+    assert.dom(list).hasAttribute('aria-labelledby', input.id);
+    assert.dom(list).hasAttribute('tabindex', '0');
+
+    const items = findAll('[role="option"]');
+
+    assert.strictEqual(items.length, 2);
+    assert.dom(items[0]).hasAttribute('role', 'option');
+    assert.dom(items[0]).hasAttribute('tabindex', '-1');
+    assert.dom(items[1]).hasAttribute('role', 'option');
+    assert.dom(items[1]).hasAttribute('tabindex', '-1');
+  });
+
+  test('keyboard navigation works between items', async function (assert) {
+    await render(
+      <template>
+        <CommandPalette as |cp|>
+          <button type="button" {{on "click" cp.open}} {{cp.focusOnClose}}>
+            Open
+          </button>
+
+          <cp.Dialog>
+            <cp.Input placeholder="Search..." />
+            <cp.List>
+              <cp.Item>Item 1</cp.Item>
+              <cp.Item>Item 2</cp.Item>
+              <cp.Item>Item 3</cp.Item>
+            </cp.List>
+          </cp.Dialog>
+        </CommandPalette>
+      </template>
+    );
+
+    await click('button');
+
+    const items = findAll('[role="option"]');
+
+    // Focus should be on input initially
+    assert.dom('input[role="combobox"]').isFocused();
+
+    // Move focus to first item by clicking it
+    await click(items[0] as HTMLElement);
+
+    // The dialog should close when an item is clicked
+    assert.dom('dialog').hasStyle({ display: 'none' });
+  });
+
+  test('escape key closes the command palette', async function (assert) {
+    await render(
+      <template>
+        <CommandPalette as |cp|>
+          <button id="trigger" type="button" {{on "click" cp.open}} {{cp.focusOnClose}}>
+            Open
+          </button>
+
+          <cp.Dialog>
+            <cp.Input placeholder="Search..." />
+            <cp.List>
+              <cp.Item>Item 1</cp.Item>
+            </cp.List>
+          </cp.Dialog>
+        </CommandPalette>
+      </template>
+    );
+
+    await click('#trigger');
+
+    assert.dom('dialog').hasStyle({ display: 'block' });
+
+    await triggerKeyEvent(document, 'keydown', 'Escape');
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    await settled();
+
+    assert.dom('dialog').hasStyle({ display: 'none' });
+    assert.strictEqual(document.activeElement, assertFind('#trigger'));
+  });
+
+  test('clicking an item closes the command palette', async function (assert) {
+    await render(
+      <template>
+        <CommandPalette as |cp|>
+          <button id="trigger" type="button" {{on "click" cp.open}} {{cp.focusOnClose}}>
+            Open
+          </button>
+
+          <cp.Dialog>
+            <cp.Input placeholder="Search..." />
+            <cp.List>
+              <cp.Item>Item 1</cp.Item>
+              <cp.Item>Item 2</cp.Item>
+            </cp.List>
+          </cp.Dialog>
+        </CommandPalette>
+      </template>
+    );
+
+    await click('#trigger');
+
+    assert.dom('dialog').hasStyle({ display: 'block' });
+
+    const items = findAll('[role="option"]');
+
+    await click(items[0] as HTMLElement);
+    await new Promise((resolve) => requestAnimationFrame(resolve));
+    await settled();
+
+    assert.dom('dialog').hasStyle({ display: 'none' });
+    assert.strictEqual(document.activeElement, assertFind('#trigger'));
+  });
+
+  test('onSelect callback is called when item is clicked', async function (assert) {
+    function selectItem(value: string) {
+      assert.step(value);
+    }
+
+    await render(
+      <template>
+        <CommandPalette as |cp|>
+          <button type="button" {{on "click" cp.open}} {{cp.focusOnClose}}>
+            Open
+          </button>
+
+          <cp.Dialog>
+            <cp.Input placeholder="Search..." />
+            <cp.List>
+              <cp.Item @onSelect={{fn selectItem "item1"}}>Item 1</cp.Item>
+              <cp.Item @onSelect={{fn selectItem "item2"}}>Item 2</cp.Item>
+            </cp.List>
+          </cp.Dialog>
+        </CommandPalette>
+      </template>
+    );
+
+    await click('button');
+
+    const items = findAll('[role="option"]');
+
+    await click(items[0] as HTMLElement);
+
+    assert.verifySteps(['item1']);
+  });
+
+  test('items can be focused with pointer', async function (assert) {
+    await render(
+      <template>
+        <CommandPalette as |cp|>
+          <button type="button" {{on "click" cp.open}} {{cp.focusOnClose}}>
+            Open
+          </button>
+
+          <cp.Dialog>
+            <cp.Input placeholder="Search..." />
+            <cp.List>
+              <cp.Item>Item 1</cp.Item>
+              <cp.Item>Item 2</cp.Item>
+            </cp.List>
+          </cp.Dialog>
+        </CommandPalette>
+      </template>
+    );
+
+    await click('button');
+
+    const items = findAll('[role="option"]');
+
+    // Move pointer to second item and trigger the event
+    const pointerMoveEvent = new PointerEvent('pointermove', { bubbles: true });
+    (items[1] as HTMLElement).dispatchEvent(pointerMoveEvent);
+
+    await settled();
+
+    // Item should be focused after pointer move
+    assert.dom(items[1] as HTMLElement).isFocused();
+  });
+
+  test('yielded isOpen has correct value', async function (assert) {
+    await render(
+      <template>
+        <CommandPalette as |cp|>
+          <button type="button" {{on "click" cp.open}} {{cp.focusOnClose}}>
+            {{if cp.isOpen "open" "closed"}}
+          </button>
+
+          <cp.Dialog>
+            <cp.Input placeholder="Search..." />
+            <cp.List>
+              <cp.Item>Item 1</cp.Item>
+            </cp.List>
+          </cp.Dialog>
+        </CommandPalette>
+      </template>
+    );
+
+    assert.dom('button').hasText('closed');
+
+    await click('button');
+
+    assert.dom('button').hasText('open');
+
+    await closeDialog();
+
+    assert.dom('button').hasText('closed');
+  });
+
+  test('can set initial open state', async function (assert) {
+    await render(
+      <template>
+        <CommandPalette @open={{true}} as |cp|>
+          <button id="trigger" type="button" {{on "click" cp.open}} {{cp.focusOnClose}}>
+            Open
+          </button>
+
+          <cp.Dialog>
+            <cp.Input placeholder="Search..." />
+            <cp.List>
+              <cp.Item>Item 1</cp.Item>
+            </cp.List>
+          </cp.Dialog>
+        </CommandPalette>
+      </template>
+    );
+
+    assert.dom('dialog').hasStyle({ display: 'block' });
+    assert.dom('input[role="combobox"]').isFocused();
+
+    await closeDialog();
+
+    assert.dom('dialog').hasStyle({ display: 'none' });
+    assert.strictEqual(document.activeElement, assertFind('#trigger'));
+  });
+
+  test('onClose callback is called', async function (assert) {
+    function handleClose() {
+      assert.step('closed');
+    }
+
+    await render(
+      <template>
+        <CommandPalette @onClose={{handleClose}} as |cp|>
+          <button type="button" {{on "click" cp.open}} {{cp.focusOnClose}}>
+            Open
+          </button>
+
+          <cp.Dialog>
+            <cp.Input placeholder="Search..." />
+            <cp.List>
+              <cp.Item>Item 1</cp.Item>
+            </cp.List>
+          </cp.Dialog>
+        </CommandPalette>
+      </template>
+    );
+
+    await click('button');
+
+    await closeDialog();
+
+    assert.verifySteps(['closed']);
+  });
+});