CommandPalette API

The CommandPalette component is the main entry point for the command palette. It handles rendering, keyboard navigation, and action execution.

Basic Usage

Import and render the CommandPalette at the root of your application:

  
+page.svelte

<script lang="ts">
  import CommandPalette, { defineActions } from '$lib';

  const actions = defineActions([
    {
      title: 'Go to Dashboard',
      subTitle: 'Navigate to the main dashboard',
      icon: '🏠',
      onRun: () => goto('/dashboard'),
      shortcut: 'G D'
    },
    {
      title: 'Toggle Theme',
      subTitle: 'Switch between light and dark mode',
      icon: '🎨',
      group: 'Preferences',
      onRun: () => toggleTheme(),
      shortcut: 'T T'
    }
  ]);
</script>

<CommandPalette
  commands={actions}
  placeholder="Search actions..."
  shortcut="$mod+k"
  onOpen={() => console.log('opened')}
  onClose={() => console.log('closed')}
/>

Props

Prop	Type	Default	Description
`commands`	`action[]`	`[]`	Array of action objects to display in the palette
`placeholder`	`string`	`"Search..."`	Placeholder text for the search input
`shortcut`	`string`	`"$mod+k"`	Keyboard shortcut to toggle the palette
`unstyled`	`boolean`	`false`	Disable all default styles

Event Callbacks

Prop	Type	Description
`onOpen`	`() => void`	Called when the palette opens
`onClose`	`() => void`	Called when the palette closes
`onActionSelect`	`(action) => void`	Called when an action is selected (before `onRun`)

Styling Props

Every visual element can be styled via class or inline style props:

  
Styled Example

<CommandPalette
  commands={actions}
  unstyled={false}
  placeholder="What do you want to do?"
  
  <!-- Style classes (Tailwind, etc.) -->
  inputClass="bg-gray-100 dark:bg-gray-800"
  resultContainerClass="hover:bg-blue-50"
  
  <!-- Or inline styles -->
  inputStyle={{ background: '#1a1a24', color: '#fff' }}
  overlayStyle={{ backdropFilter: 'blur(8px)' }}
  optionSelectedStyle={{ background: 'rgba(99, 102, 241, 0.1)' }}
/>

Class Prop	Style Prop	Target Element
`inputClass`	`inputStyle`	Search input field
`overlayClass`	`overlayStyle`	Background overlay
`paletteWrapperInnerClass`	`paletteWrapperInnerStyle`	Main palette container
`resultsContainerClass`	`resultsContainerStyle`	Results list container
`resultContainerClass`	`resultContainerStyle`	Individual result item
`optionSelectedClass`	`optionSelectedStyle`	Active/selected result
`titleClass`	`titleStyle`	Result title
`subtitleClass`	`subtitleStyle`	Result subtitle
`descriptionClass`	`descriptionStyle`	Result description
`keyboardButtonClass`	`keyboardButtonStyle`	Keyboard shortcut badges

Keyboard Navigation

The palette supports the following keyboard shortcuts out of the box:

⌘K

Toggle palette (customizable)

↑↓

Navigate results

Enter

Execute selected action

Esc

Close palette