diff --git a/e2e/extend.spec.ts b/e2e/extend.spec.ts
index 1170c5953b..8d905807ee 100644
--- a/e2e/extend.spec.ts
+++ b/e2e/extend.spec.ts
@@ -6,6 +6,12 @@ test("ButtonToggle page should have h1", async ({ page }) => {
   expect(await page.textContent("h1")).toBe("Svelte Button Toggle");
 });
 
+// CommandPalette
+test("CommandPalette page should have h1", async ({ page }) => {
+  await page.goto("/docs/extend/command-palette");
+  expect(await page.textContent("h1")).toBe("Svelte Command Palette");
+});
+
 // flowbite-svelte-starter
 test("Flowbite Svelte Starter page should have h1", async ({ page }) => {
   await page.goto("/docs/extend/flowbite-svelte-starter");
diff --git a/src/lib/command-palette/CommandPalette.svelte b/src/lib/command-palette/CommandPalette.svelte
new file mode 100644
index 0000000000..1e7d66d147
--- /dev/null
+++ b/src/lib/command-palette/CommandPalette.svelte
@@ -0,0 +1,240 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+  import type { CommandPaletteProps, CommandItem } from '$lib/types';
+  import { commandPalette } from './theme';
+  import { getTheme } from "$lib/theme/themeUtils";
+  import clsx from "clsx";
+
+  const styles = commandPalette();
+
+  let {
+    open = $bindable(false),
+    items = [],
+    placeholder = 'Type a command or search keywords ...',
+    emptyMessage = 'No results found.',
+    shortcutKey = 'k',
+    vim = false,
+    onclose,
+    classes
+  }: CommandPaletteProps = $props();
+
+  const theme = getTheme("commandPalette");
+
+  let search = $state('');
+  let selectedIndex = $state(0);
+  let inputElement = $state<HTMLInputElement>();
+  let containerElement = $state<HTMLDivElement>();
+
+  const filteredItems = $derived(
+    search.trim() === ''
+      ? items
+      : items.filter((item) => {
+          const searchLower = search.toLowerCase();
+          const labelMatch = item.label.toLowerCase().includes(searchLower);
+          const descMatch = item.description?.toLowerCase().includes(searchLower);
+          const keywordMatch = item.keywords?.some((kw) =>
+            kw.toLowerCase().includes(searchLower)
+          );
+          return labelMatch || descMatch || keywordMatch;
+        })
+  );
+
+  $effect(() => {
+    if (open && inputElement) {
+      inputElement.focus();
+      selectedIndex = 0;
+    }
+  });
+
+  $effect(() => {
+    if (filteredItems.length > 0 && selectedIndex >= filteredItems.length) {
+      selectedIndex = filteredItems.length - 1;
+    }
+  });
+
+  function handleKeydown(e: KeyboardEvent) {
+    if (!open) return;
+
+    switch (e.key) {
+      case 'Escape':
+        e.preventDefault();
+        closeCommandPalette();
+        break;
+      case 'ArrowDown':
+      case 'j':
+        if (e.key === 'j' && !vim) break;
+        if (e.key === 'j' && e.ctrlKey) break;
+        e.preventDefault();
+        selectedIndex = Math.min(selectedIndex + 1, filteredItems.length - 1);
+        scrollToSelected();
+        break;
+      case 'ArrowUp':
+      case 'k':
+        if (e.key === 'k' && !vim) break;
+        if (e.key === 'k' && e.ctrlKey) break;
+        e.preventDefault();
+        selectedIndex = Math.max(selectedIndex - 1, 0);
+        scrollToSelected();
+        break;
+      case 'Enter':
+        e.preventDefault();
+        if (filteredItems[selectedIndex]) {
+          selectItem(filteredItems[selectedIndex]);
+        }
+        break;
+    }
+  }
+
+  function scrollToSelected() {
+    if (!containerElement) return;
+    const listElement = containerElement.querySelector('ul');
+    const selectedElement = containerElement.querySelector(
+      `#${CSS.escape(filteredItems[selectedIndex]?.id)}`
+    ) as HTMLElement;
+
+    if (selectedElement && listElement) {
+      const listRect = listElement.getBoundingClientRect();
+      const elementRect = selectedElement.getBoundingClientRect();
+
+      if (elementRect.bottom > listRect.bottom) {
+        selectedElement.scrollIntoView({ block: 'end', behavior: 'auto' });
+      } else if (elementRect.top < listRect.top) {
+        selectedElement.scrollIntoView({ block: 'start', behavior: 'auto' });
+      }
+    }
+  }
+
+  function selectItem(item: CommandItem) {
+    item.onselect();
+    closeCommandPalette();
+  }
+
+  function closeCommandPalette() {
+    open = false;
+    search = '';
+    selectedIndex = 0;
+    onclose?.();
+  }
+
+  function handleBackdropClick(e: MouseEvent) {
+    if (e.target === e.currentTarget) {
+      closeCommandPalette();
+    }
+  }
+
+  function handleBackdropKeydown(e: KeyboardEvent) {
+    if (e.key === 'Enter' && e.target === e.currentTarget) {
+      closeCommandPalette();
+    }
+  }
+
+  onMount(() => {
+    const handleGlobalKeydown = (e: KeyboardEvent) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === shortcutKey) {
+        e.preventDefault();
+        open = !open;
+      }
+    };
+
+    window.addEventListener('keydown', handleGlobalKeydown);
+    return () => window.removeEventListener('keydown', handleGlobalKeydown);
+  });
+</script>
+
+<svelte:window onkeydown={handleKeydown} />
+
+{#if open}
+  <div
+    class={styles.backdrop({ class: clsx(theme?.backdrop, classes?.backdrop) })}
+    onclick={handleBackdropClick}
+    onkeydown={handleBackdropKeydown}
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="command-palette-label"
+    tabindex="-1"
+  >
+    <div class={styles.panel({ class: clsx(theme?.panel, classes?.panel)})} bind:this={containerElement}>
+      <!-- Search Input -->
+      <div class={styles.inputWrapper({ class: clsx(theme?.inputWrapper, classes?.inputWrapper)})}>
+        <svg class={styles.icon({ class: clsx(theme?.icon, classes?.icon)})} fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <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"
+          />
+        </svg>
+        <input
+          bind:this={inputElement}
+          bind:value={search}
+          type="text"
+          class={styles.input({ class: clsx(theme?.input, classes?.input)})}
+          placeholder={placeholder}
+          role="combobox"
+          aria-expanded="true"
+          aria-controls="command-palette-options"
+          aria-activedescendant={filteredItems[selectedIndex]?.id}
+        />
+      </div>
+
+      <!-- Results -->
+      {#if filteredItems.length > 0}
+        <ul id="command-palette-options" class={styles.list({ class: clsx(theme?.list, classes?.list)})} role="listbox">
+          {#each filteredItems as item, index (item.id)}
+            <li
+              data-index={index}
+              id={item.id}
+              role="option"
+              aria-selected={index === selectedIndex}
+              class={styles.item({ selected: index === selectedIndex, class: clsx(theme?.item, classes?.item)})}
+              onclick={() => selectItem(item)}
+              onkeydown={(e) => e.key === 'Enter' && selectItem(item)}
+              onmouseenter={() => (selectedIndex = index)}
+              tabindex="-1"
+            >
+              <div class="flex items-center gap-3">
+                {#if item.icon}
+                  <span class="text-lg">{item.icon}</span>
+                {/if}
+                <div class="flex-1 min-w-0">
+                  <div class="font-medium text-sm truncate">{item.label}</div>
+                  {#if item.description}
+                    <div class={styles.itemDescription()}>
+                      {item.description}
+                    </div>
+                  {/if}
+                </div>
+              </div>
+            </li>
+          {/each}
+        </ul>
+      {:else if search}
+        <div class={styles.empty({ class: clsx(theme?.empty, classes?.empty)})}>
+          <p>{emptyMessage}</p>
+        </div>
+      {/if}
+
+      <!-- Footer -->
+      <div class={styles.footer({ class: clsx(theme?.footer, classes?.footer)})}>
+        <div class="flex items-center gap-4">
+          <kbd class={styles.kbd({ class: clsx(theme?.kbd, classes?.kbd)})}>
+            {#if vim}
+              <span>j/k</span>
+            {:else}
+              <span>↑↓</span>
+            {/if}
+            <span>Navigate</span>
+          </kbd>
+          <kbd class={styles.kbd({ class: clsx(theme?.kbd, classes?.kbd)})}>
+            <span>↵</span>
+            <span>Select</span>
+          </kbd>
+        </div>
+        <kbd class={styles.kbd({ class: clsx(theme?.kbd, classes?.kbd)})}>
+          <span>ESC</span>
+          <span>Close</span>
+        </kbd>
+      </div>
+    </div>
+  </div>
+{/if}
diff --git a/src/lib/command-palette/index.ts b/src/lib/command-palette/index.ts
new file mode 100644
index 0000000000..dbf465e660
--- /dev/null
+++ b/src/lib/command-palette/index.ts
@@ -0,0 +1 @@
+export { default as CommandPalette } from "./CommandPalette.svelte";
\ No newline at end of file
diff --git a/src/lib/command-palette/theme.ts b/src/lib/command-palette/theme.ts
new file mode 100644
index 0000000000..fb537f6f8e
--- /dev/null
+++ b/src/lib/command-palette/theme.ts
@@ -0,0 +1,37 @@
+import { tv, type VariantProps } from "tailwind-variants";
+import type { Classes } from "$lib/theme/themeUtils";
+
+export type CommandPaletteVariants = VariantProps<typeof commandPalette> & Classes<typeof commandPalette>;
+
+export const commandPalette = tv({
+  slots: {
+    backdrop:
+      "fixed inset-0 z-50 flex items-start justify-center bg-gray-900/50 dark:bg-gray-900/80 p-4 sm:p-6 md:p-20",
+    panel:
+      "w-full max-w-2xl bg-white dark:bg-gray-800 rounded-lg shadow-2xl ring-1 ring-black/5 dark:ring-white/10 overflow-hidden transform transition-all",
+    inputWrapper: "relative",
+    icon:
+      "pointer-events-none absolute left-4 top-3.5 h-5 w-5 text-gray-400 dark:text-gray-500",
+    input:
+      "w-full border-0 bg-transparent pl-11 pr-4 py-3 text-gray-900 dark:text-white " +
+      "placeholder-gray-400 dark:placeholder-gray-500 focus:ring-2 focus:ring-primary-500 focus:ring-offset-0 text-sm",
+    list:
+      "max-h-80 scroll-py-2 overflow-y-auto border-t border-gray-200 dark:border-gray-700",
+    item:
+      "cursor-pointer select-none px-4 py-2 text-sm text-gray-900 dark:text-gray-100 " +
+      "aria-selected:bg-primary-600 aria-selected:text-white",
+    itemDescription:
+      "text-xs truncate text-gray-500 dark:text-gray-400 aria-selected:text-primary-100",
+    empty:
+      "px-4 py-14 text-center border-t border-gray-200 dark:border-gray-700 text-sm text-gray-500 dark:text-gray-400",
+    footer:
+      "flex flex-wrap items-center justify-between gap-2 bg-gray-50 dark:bg-gray-900/50 " +
+      "px-4 py-2.5 text-xs text-gray-500 dark:text-gray-400 border-t border-gray-200 dark:border-gray-700",
+    kbd:
+      "inline-flex items-center gap-1 rounded border border-gray-300 dark:border-gray-600 " +
+      "bg-white dark:bg-gray-800 px-2 py-1 font-sans text-xs"
+  },
+
+  variants: {},
+  defaultVariants: {}
+});
diff --git a/src/lib/index.ts b/src/lib/index.ts
index 4c88238dde..97b57958cb 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -87,6 +87,7 @@ export * from "./utils";
 export * from "./types";
 
 // extend
+export * from "./command-palette";
 export * from "./virtuallist";
 export * from "./kanban";
 export * from "./split-pane";
diff --git a/src/lib/theme/themes.ts b/src/lib/theme/themes.ts
index 2c6732bafd..1783e5ffb2 100644
--- a/src/lib/theme/themes.ts
+++ b/src/lib/theme/themes.ts
@@ -78,6 +78,7 @@ export { secondary } from "../typography/secondary";
 export { span } from "../typography/span";
 
 // extend
+export { commandPalette } from "$lib/command-palette/theme";
 export { virtualList } from "$lib/virtuallist";
 export { kanbanBoard, kanbanCard } from "$lib/kanban/theme";
 export { splitpane, pane, divider, dividerHitArea } from "$lib/split-pane/theme";
diff --git a/src/lib/types.ts b/src/lib/types.ts
index 44571264f0..abf55e9b30 100644
--- a/src/lib/types.ts
+++ b/src/lib/types.ts
@@ -117,6 +117,7 @@ import type { TagsVariants } from "$lib/forms/tags/theme";
 import type { VirtualListVariants } from "$lib/virtuallist/theme";
 import type { KanbanBoardVariants, KanbanCardVariants } from "$lib/kanban/theme";
 import type { TourVariants } from "$lib/tour/theme";
+import type { CommandPaletteVariants } from "$lib/command-palette/theme";
 
 // utils
 import type { CloseButtonVariants } from "$lib/utils/theme";
@@ -621,7 +622,7 @@ export interface DrawerProps extends DrawerVariants, Omit<DialogProps, "hidden"
   offset?: string;
 }
 
-export interface DrawerHandleProps extends DrawerHandleVariants, HTMLButtonAttributes {}
+export interface DrawerHandleProps extends DrawerHandleVariants, HTMLButtonAttributes { }
 
 export interface DrawerheadProps extends DrawerheadVariants, HTMLButtonAttributes {
   closeIcon?: Snippet;
@@ -780,7 +781,7 @@ export interface FloatingLabelInputProps extends FloatingLabelInputVaratiants, O
 }
 
 // helper
-export interface HelperProps extends HelperVariants, Omit<HTMLAttributes<HTMLParagraphElement>, "color"> {}
+export interface HelperProps extends HelperVariants, Omit<HTMLAttributes<HTMLParagraphElement>, "color"> { }
 
 // input
 export type InputValue = string | number | string[] | undefined;
@@ -976,7 +977,7 @@ export interface TimepickerProps {
   timeIntervals?: string[];
   columns?: ColumnCount;
   // Callback props instead of events
-  onselect?: (data: { time: string; endTime: string; [key: string]: string }) => void;
+  onselect?: (data: { time: string; endTime: string;[key: string]: string }) => void;
 }
 
 // textarea
@@ -1165,7 +1166,7 @@ export interface ToolbarProps extends ToolbarVariants, Omit<HTMLAttributes<HTMLD
   end?: Snippet;
 }
 
-export interface ToolbarGroupProps extends ToolbarGroupVariants, HTMLAttributes<HTMLDivElement> {}
+export interface ToolbarGroupProps extends ToolbarGroupVariants, HTMLAttributes<HTMLDivElement> { }
 
 export type ToolbarButtonProps = ToolbarButtonVariants &
   AnchorButtonAttributes & {
@@ -1482,7 +1483,7 @@ export interface SkeletonProps extends SkeletonVariants, HTMLAttributes<HTMLDivE
   size?: SkeletonVariants["size"];
 }
 
-export interface TestimonialPlaceholderProps extends TestimonialPlaceholderVariants, HTMLAttributes<HTMLDivElement> {}
+export interface TestimonialPlaceholderProps extends TestimonialPlaceholderVariants, HTMLAttributes<HTMLDivElement> { }
 
 export interface TextPlaceholderProps extends TextPlaceholderVariants, HTMLAttributes<HTMLDivElement> {
   size?: TextPlaceholderVariants["size"];
@@ -1492,7 +1493,7 @@ export interface VideoPlaceholderProps extends VideoPlaceholderVariants, HTMLAtt
   size?: VideoPlaceholderVariants["size"];
 }
 
-export interface WidgetPlaceholderProps extends WidgetPlaceholderVariants, HTMLAttributes<HTMLDivElement> {}
+export interface WidgetPlaceholderProps extends WidgetPlaceholderVariants, HTMLAttributes<HTMLDivElement> { }
 
 // speeddial
 export interface SpeedCtxType {
@@ -1886,7 +1887,7 @@ export interface ToastProps extends ToastVaraints, HTMLAttributes<HTMLDivElement
 }
 
 // tooltip
-export interface TooltipProps extends TooltipVariants, PopperProps {}
+export interface TooltipProps extends TooltipVariants, PopperProps { }
 
 // typography
 // anchor
@@ -2172,3 +2173,24 @@ export interface TourProps extends TourVariants, Omit<HTMLAttributes<HTMLDivElem
   tooltipOffset?: number;
   highlightClass?: string;
 }
+
+// command palette
+export interface CommandItem {
+  id: string;
+  label: string;
+  description?: string;
+  /** Icon can be a Svelte Component or a string representing an icon class/name */
+  icon?: string | Component;
+  keywords?: string[];
+  onselect: () => void;
+}
+
+export interface CommandPaletteProps extends CommandPaletteVariants, HTMLAttributes<HTMLDivElement> {
+  open?: boolean;
+  items?: CommandItem[];
+  placeholder?: string;
+  emptyMessage?: string;
+  shortcutKey?: string;
+  vim?: boolean;
+  onclose?: () => void;
+}
diff --git a/src/routes/docs-examples/extend/command-palette/+page.svelte b/src/routes/docs-examples/extend/command-palette/+page.svelte
new file mode 100644
index 0000000000..300c1a19dd
--- /dev/null
+++ b/src/routes/docs-examples/extend/command-palette/+page.svelte
@@ -0,0 +1,189 @@
+<script lang="ts">
+  import { CommandPalette, Toggle } from '$lib';
+  import { goto } from '$app/navigation';
+
+  let paletteOpen = $state(false);
+  let vimMode = $state(false);
+
+  const handleVimToggle = () => {
+    vimMode = !vimMode;
+  };
+  
+  const commands = [
+    {
+      id: 'new-file',
+      label: 'New File',
+      description: 'Create a new file',
+      icon: '📄',
+      keywords: ['create', 'add'],
+      onselect: () => console.log('New file created')
+    },
+    {
+      id: 'open-file',
+      label: 'Open File',
+      description: 'Open an existing file',
+      icon: '📂',
+      keywords: ['browse', 'load'],
+      onselect: () => console.log('Opening file picker')
+    },
+    {
+      id: 'save',
+      label: 'Save',
+      description: 'Save current file',
+      icon: '💾',
+      keywords: ['write', 'store'],
+      onselect: () => console.log('File saved')
+    },
+    {
+      id: 'settings',
+      label: 'Settings',
+      description: 'Open application settings',
+      icon: '⚙️',
+      keywords: ['preferences', 'config', 'options'],
+      onselect: () => goto('/')
+    },
+    {
+      id: 'search',
+      label: 'Search in Files',
+      description: 'Search across all files',
+      icon: '🔍',
+      keywords: ['find', 'grep', 'locate'],
+      onselect: () => console.log('Opening search')
+    },
+    {
+      id: 'theme-light',
+      label: 'Switch to Light Theme',
+      description: 'Change appearance to light mode',
+      icon: '☀️',
+      keywords: ['theme', 'appearance', 'bright'],
+      onselect: () => document.documentElement.classList.remove('dark')
+    },
+    {
+      id: 'theme-dark',
+      label: 'Switch to Dark Theme',
+      description: 'Change appearance to dark mode',
+      icon: '🌙',
+      keywords: ['theme', 'appearance', 'night'],
+      onselect: () => document.documentElement.classList.add('dark')
+    },
+    {
+      id: 'help',
+      label: 'Help & Documentation',
+      description: 'View help documentation',
+      icon: '❓',
+      keywords: ['docs', 'support', 'guide'],
+      onselect: () => goto('/docs/pages/introduction')
+    },
+    {
+      id: 'shortcuts',
+      label: 'Keyboard Shortcuts',
+      description: 'View all keyboard shortcuts',
+      icon: '⌨️',
+      keywords: ['keys', 'hotkeys', 'commands'],
+      onselect: () => console.log('Showing shortcuts')
+    },
+    {
+      id: 'profile',
+      label: 'View Profile',
+      description: 'Go to your profile page',
+      icon: '👤',
+      keywords: ['user', 'account', 'me'],
+      onselect: () => (window.location.href = '/profile')
+    },
+    {
+      id: 'notifications',
+      label: 'Notifications',
+      description: 'View your notifications',
+      icon: '🔔',
+      keywords: ['alerts', 'updates', 'messages'],
+      onselect: () => console.log('Opening notifications')
+    },
+    {
+      id: 'export',
+      label: 'Export Data',
+      description: 'Export your data as JSON',
+      icon: '📤',
+      keywords: ['download', 'backup', 'save'],
+      onselect: () => console.log('Exporting data')
+    },
+    {
+      id: 'import',
+      label: 'Import Data',
+      description: 'Import data from file',
+      icon: '📥',
+      keywords: ['upload', 'restore', 'load'],
+      onselect: () => console.log('Opening import dialog')
+    },
+    {
+      id: 'print',
+      label: 'Print',
+      description: 'Print current page',
+      icon: '🖨️',
+      keywords: ['printer', 'paper'],
+      onselect: () => window.print()
+    },
+    {
+      id: 'logout',
+      label: 'Log Out',
+      description: 'Sign out of your account',
+      icon: '🚪',
+      keywords: ['signout', 'exit', 'leave'],
+      onselect: () => console.log('Logging out')
+    }
+  ];
+</script>
+
+<div class="min-h-screen bg-gray-50 dark:bg-gray-900 p-8">
+  <div class="max-w-4xl mx-auto">
+    <h1 class="text-4xl font-bold text-gray-900 dark:text-white mb-4">
+      Command Palette Demo
+    </h1>
+    <p class="text-gray-600 dark:text-gray-400 mb-8">
+      Press <kbd class="px-2 py-1 bg-gray-200 dark:bg-gray-800 rounded text-sm font-mono">⌘P (default ⌘K)</kbd> or 
+      <kbd class="px-2 py-1 bg-gray-200 dark:bg-gray-800 rounded text-sm font-mono">Ctrl+P (default Ctrl+K)</kbd> to open 
+      the command palette, or click the button below.
+    </p>
+
+    <button
+      onclick={() => (paletteOpen = true)}
+      class="px-6 py-3 bg-primary-600 hover:bg-primary-700 text-white rounded-lg font-medium transition-colors mb-4"
+    >
+      Open Command Palette
+    </button>
+    <Toggle checked={vimMode} onclick={handleVimToggle}>Vim mode is {vimMode ? 'on' : 'off'}</Toggle>
+    <div class="mt-12 space-y-6">
+      <h2 class="text-2xl font-bold text-gray-900 dark:text-white">
+        Available Commands
+      </h2>
+      
+      <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+        {#each commands as command (command.id)}
+          <div class="bg-white dark:bg-gray-800 p-4 rounded-lg border border-gray-200 dark:border-gray-700">
+            <div class="flex items-start gap-3">
+              <span class="text-2xl">{command.icon}</span>
+              <div>
+                <h3 class="font-semibold text-gray-900 dark:text-white">
+                  {command.label}
+                </h3>
+                <p class="text-sm text-gray-600 dark:text-gray-400">
+                  {command.description}
+                </p>
+                {#if command.keywords}
+                  <div class="flex flex-wrap gap-1 mt-2">
+                    {#each command.keywords as keyword (keyword)}
+                      <span class="text-xs px-2 py-0.5 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-400 rounded">
+                        {keyword}
+                      </span>
+                    {/each}
+                  </div>
+                {/if}
+              </div>
+            </div>
+          </div>
+        {/each}
+      </div>
+    </div>
+  </div>
+</div>
+
+<CommandPalette bind:open={paletteOpen} items={commands} shortcutKey="p" vim={vimMode}/>
\ No newline at end of file
diff --git a/src/routes/docs/extend/command-palette.md b/src/routes/docs/extend/command-palette.md
new file mode 100644
index 0000000000..9510330696
--- /dev/null
+++ b/src/routes/docs/extend/command-palette.md
@@ -0,0 +1,44 @@
+---
+layout: componentLayout
+title: Svelte Command Palette
+breadcrumb_title: Command Palette
+component_title: Command Palette
+dir: Extend
+description: AAA.
+
+---
+
+<script lang="ts">
+  import { TableProp, TableDefaultRow, CompoAttributesViewer, Seealso, GitHubCompoLinks, LlmLink } from '../../utils'
+  import { P, A } from '$lib'
+
+  const components = 'CommandPalette'
+  // const relatedLinks = [''];
+</script>
+
+## Setup
+
+```svelte example hideOutput
+<script lang="ts">
+  import { CommandPalette } from  'flowbite-svelte';
+</script>
+```
+
+## Usage Examples
+
+See [examples](/docs-examples/extend/command-palette) and [code](https://github.com/themesberg/flowbite-svelte/tree/main/src/routes/docs-examples/extend/command-palette).
+
+
+## Component data
+
+The component has the following props, type, and default values. See [types page](/docs/pages/typescript) for type information.
+
+<CompoAttributesViewer {components} dir="extend" />
+
+## GitHub Links
+
+<GitHubCompoLinks {components} dir="extend"/>
+
+## LLM Link
+
+<LlmLink />
\ No newline at end of file