Command

⌘K palette

A search-and-run palette for apps with many commands — ⌘K to open, type, Enter. It helps people who know what they want; it doesn't replace visible navigation.

Use it for actions and navigation, not for picking values (that's Combobox). Items carry a group, optional keywords and a shortcut label.

Basic

or press ⌘+K

⌕Esc

File

＋New project⌘N

Open recent…⌘O

Save all⌥⌘S

View

Toggle sidebar⌘B

Toggle theme

Zoom in⌘+

Navigate

Go to character…

Go to news

↑↓ navigate↵ selectesc close

<script setup lang="ts">
import { ref } from "vue";
import { BlessButton, BlessCommand, BlessKbd, useToast } from "blessing-ui";
import { commands } from "./_commands";
const open = ref(false);
const { toast } = useToast();
</script>

<template>
  <div class="row">
    <BlessButton @click="open = true">Command palette</BlessButton>
    <span>or press <BlessKbd :keys="['⌘', 'K']" /></span>
  </div>
  <BlessCommand
    v-model:open="open"
    :items="commands"
    @select="toast({ title: $event.label, color: 'accent' })"
  >
    <template #footer>
      <span><BlessKbd>↑↓</BlessKbd> navigate</span>
      <span><BlessKbd>↵</BlessKbd> select</span>
      <span><BlessKbd>esc</BlessKbd> close</span>
    </template>
  </BlessCommand>
</template>

Inline

⌕

File

＋New project⌘N

Open recent…⌘O

Save all⌥⌘S

View

Toggle sidebar⌘B

Toggle theme

Zoom in⌘+

Navigate

Go to character…

Go to news

<script setup lang="ts">
import { BlessCommand, useToast } from "blessing-ui";
import { commands } from "./_commands";
const { toast } = useToast();
</script>

<template>
  <div style="max-width: 480px">
    <BlessCommand
      :items="commands"
      inline
      placeholder="Filter commands…"
      @select="toast($event.label)"
    />
  </div>
</template>

• ⌘K / Ctrl+K opens it (hotkey), except inside rich-text editors, where that key already inserts a link.
• The input is a combobox over the result list: ↑ / ↓ move, Enter runs, Home / End jump. Groups (group) are labelled; "No results" is announced.
• keywords add search terms; filter replaces matching; inline renders it in the page instead of a modal.

Usage

import { BlessCommand } from "blessing-ui";

API

Props

Name	Type	Default	Description
items*	BlessCommandItem[]	—
placeholder	string	"Type a command…"
label	string	"Search commands"	accessible name of the search input
emptyText	string	"No results."
hotkey	boolean	true	bind ⌘K / Ctrl+K to open
inline	boolean	—	render inline instead of inside a modal
filter	((item: BlessCommandItem, query: string) => boolean)	—
open	boolean	false

Events

Name	Payload	Description
update:open	[value: boolean]
select	[item: BlessCommandItem]

Slots

Name	Scope	Description
item	{ item: BlessCommandItem; }
footer	—