component

Command Palette

props · 36 shown · 36 total

Data

  • items required
    CommandPaletteNodeInput[]

    Commands to show, flat or grouped into sections.

State

  • boolean
    default false

    Whether the palette is open (baked onto the field's `aria-expanded`).

  • string

    Current search query (the host owns the text; the connect filters by it).

Appearance

  • "transparent" "surface.peak" "surface.hill" "surface.base" "surface.valley" "surface.ground"

    Surface ramp step of the palette's dialog. Forwarded to the `<Dialog>`.

  • "none" "default" "bold" "muted" "accent"

    Resting border color of the palette's dialog.

  • false CommandPaletteCardProps<TSlot>

    The Card the palette's Dialog renders its search header, results and footer in (forwarded to the Dialog's `card`). By default a transparent card whose content runs edge to edge (`content.padding: "none"`), divided by hairlines. Set `contentBackground` for a shell-and-inset look (the list on its own panel inside the dialog surface), `footer` for footer content. `false` renders the Dialog's legacy bare wrapper.

  • "sm" "md" "lg" "2xl" "xl" "xs" "none" "2xs" "3xl" "4xl" "5xl" "6xl" "inherit" "inner" "full"
    default "xl"

    Corner radius of the palette's dialog. Softer than the dialog default — the search field's top corners follow it (`radiusTop: "inherit"` on the field) and the dialog clips the list to the bottom pair.

  • "sm" "md" "lg" "2xl" "xl" "xs" "none" "2xs" "3xl" "4xl" "5xl" "6xl" "inherit" "inner" "full"

    Override the dialog's two bottom corners.

  • "sm" "md" "lg" "2xl" "xl" "xs" "none" "2xs" "3xl" "4xl" "5xl" "6xl" "inherit" "inner" "full"

    Override the dialog's two left corners.

  • "sm" "md" "lg" "2xl" "xl" "xs" "none" "2xs" "3xl" "4xl" "5xl" "6xl" "inherit" "inner" "full"

    Override the dialog's two right corners.

  • "sm" "md" "lg" "2xl" "xl" "xs" "none" "2xs" "3xl" "4xl" "5xl" "6xl" "inherit" "inner" "full"

    Override the dialog's two top corners.

  • "sm" "md" "lg" "xl" "xs" "none"

    Elevation of the palette's dialog.

  • "soft" "framed" "separate" "plain"
    default "soft"

    How each command's `shortcut` renders (KbdGroup `appearance`). soft: quiet square keys on a subtle fill (the default). framed: one rounded frame per chord holding compact caps. separate: loose caps. plain: text only.

  • "sm" "md" "lg"
    default "md"

    Size variant for the field and result rows.

  • CommandPaletteTone

    Tone (color) scheme applied to the palette.

  • boolean

    Blur + saturate whatever shows through the palette's dialog surface.

Layout

  • "sm" "md" "lg" "2xl" "xl" "xs" "none" "10xl" "11xl" "2xs" "3xl" "3xs" "4xl" "4xs" "5xl" "6xl" "7xl" "8xl" "9xl"

    The dialog's own padding. The palette strips the header/content padding itself (the field and the list run edge-to-edge).

Behavior

  • boolean (item: CommandPaletteItemInput, query: string) => number | boolean | null | undefined
    default true

    Filter/ranking strategy. `true` = built-in fuzzy, `false` = no filtering (consumer pre-filters), or a `(command, query) => score | boolean | null` predicate (higher score ranks first).

  • hotkey svelte
    boolean string
    default false

    Register a global open hotkey. `true` = ⌘K / Ctrl+K; a string sets the key (still requires ⌘/Ctrl). `false` (default) leaves open control to the consumer.

  • boolean
    default false

    Whether command sources are still loading (shows the loading state).

  • onCommand svelte
    (id: Key) => void

    Fired when a command is activated (Enter / click). The palette then closes.

  • onOpenChange svelte
    (open: boolean) => void

    Fired when the open state changes.

  • (query: string) => void

    Fired when the query text changes.

  • "auto" "mac" "other"
    default "auto"

    Which platform's labels the shortcuts use (`mod` → ⌘ on mac, Ctrl elsewhere). auto: the detected platform (`detectedPlatform`), mac until one is detected.

  • boolean
    default true

    Show each command's `shortcut` hint on its trailing edge.

Accessibility

  • CommandPaletteLabels

    Accessible names + the search placeholder / empty-state copy: `dialog` (the `<dialog>`'s name, default `"Command palette"`), `input` (the search field, default `"Search commands"`), `listbox` (the results, default `"Commands"`), `placeholder` and `empty`.

Slots

  • empty slot svelte
    Snippet

    Custom empty state (replaces "No commands found").

  • leading slot svelte
    Snippet

    Custom field leading content, rendered inside the leading `<Affix>` (replaces the default search glyph). The affix is decorative by default — opt out via `passThrough.searchIcon.props.decorative = false`.

  • loading slot svelte
    Snippet

    Custom loading state (replaces the default spinner).

Advanced

  • "mac" "other"

    The viewer's platform, as `detectPlatform()` from `@pindoba/core-kbd` reports it after mount. Used only when `shortcutPlatform` is "auto".

  • element binding svelte
    HTMLInputElement null

    The bound `<input>` element.

  • CommandPaletteIds

    Stable id overrides for the palette's dialog, input, and listbox elements.

  • CommandPalettePassThrough

    Per-slot style/attribute overrides for the Dialog, field, ListBox, footer and card.

Plus all standard <dialog> HTML attributes.

Type

  • Components
  • Blocks