Frappe UIFrappe UI

CommandPalette ​

A searchable list of commands/pages in a modal, opened with Mod+K. Give it groups of items; it emits select with whichever one the user picks.

vue
<script setup>
import { ref } from 'vue'
import { Button, CommandPalette } from 'frappe-ui'

const open = ref(false)
const searchQuery = ref('')
const selected = ref('')

const groups = [
  {
    title: 'Pages',
    items: [
      { name: 'inbox', title: 'Inbox', icon: 'lucide-inbox' },
      { name: 'settings', title: 'Settings', icon: 'lucide-settings' },
    ],
  },
  {
    title: 'Actions',
    items: [
      {
        name: 'new-task',
        title: 'New task',
        description: 'Mod+N',
        icon: 'lucide-plus',
      },
    ],
  },
]

function select(item) {
  selected.value = item.title
}
</script>

<template>
  <div class="flex flex-col items-start gap-3">
    <Button @click="open = true">Open command palette (or press Mod+K)</Button>
    <p v-if="selected" class="text-sm text-ink-gray-6">
      Selected: {{ selected }}
    </p>
    <CommandPalette
      v-model:open="open"
      v-model:search-query="searchQuery"
      :groups="groups"
      @select="select"
    />
  </div>
</template>

Groups and items ​

js
const groups = [
  {
    title: 'Pages',
    items: [{ name: 'inbox', title: 'Inbox', icon: 'lucide-inbox' }],
  },
]

Each item needs a unique name and a title; description and icon (a lucide-* string, an emoji, or a component) are optional. A group's hideTitle hides its heading while still grouping its items under it.

Items render through CommandPaletteItem by default. Pass a group's own component to render its items differently — it receives item and active props, the same as CommandPaletteItem.

Opening it ​

Mod+K opens the palette from anywhere on the page (registered internally via useShortcut) — no wiring needed. Open it programmatically with v-model:open.

API Reference ​

CommandPalette ​

Show types
typescript
import type { Component } from 'vue'

export interface CommandPaletteItemData {
  /** Unique key across all groups. */
  name: string
  /** Primary label. */
  title: string
  /** Secondary text shown right-aligned. */
  description?: string
  icon?: string | Component
  disabled?: boolean
  [key: string]: unknown
}

export interface CommandPaletteGroup {
  /** Heading shown above the group's items. */
  title: string
  /** Hide the heading while still grouping items under it. */
  hideTitle?: boolean
  items: CommandPaletteItemData[]
  /**
   * Component used to render each item, receiving `item` and `active` props.
   * Defaults to the built-in `CommandPaletteItem` (title + icon + description).
   */
  component?: Component
}

export interface CommandPaletteProps {
  /** Groups of items to search and pick from. */
  groups?: CommandPaletteGroup[]
}

export interface CommandPaletteEmits {
  /** Fired when an item is picked. The palette closes right after. */
  select: [item: CommandPaletteItemData]
}
groups
= []
CommandPaletteGroup[]

Groups of items to search and pick from.

open
= false
boolean
searchQuery
= ""
string
update:open
[value: boolean]

Fired when the open state changes.

select
[item: CommandPaletteItemData]
update:searchQuery
[value: string]

Fired when the search query changes.

CommandPaletteItem ​

Show types
typescript
import type { Component } from 'vue'

export interface CommandPaletteItemData {
  /** Unique key across all groups. */
  name: string
  /** Primary label. */
  title: string
  /** Secondary text shown right-aligned. */
  description?: string
  icon?: string | Component
  disabled?: boolean
  [key: string]: unknown
}

export interface CommandPaletteGroup {
  /** Heading shown above the group's items. */
  title: string
  /** Hide the heading while still grouping items under it. */
  hideTitle?: boolean
  items: CommandPaletteItemData[]
  /**
   * Component used to render each item, receiving `item` and `active` props.
   * Defaults to the built-in `CommandPaletteItem` (title + icon + description).
   */
  component?: Component
}

export interface CommandPaletteProps {
  /** Groups of items to search and pick from. */
  groups?: CommandPaletteGroup[]
}

export interface CommandPaletteEmits {
  /** Fired when an item is picked. The palette closes right after. */
  select: [item: CommandPaletteItemData]
}
item*
CommandPaletteItemData

The item to render.

active
boolean

Whether this item is the currently highlighted (keyboard/hover) option.

ComboboxContextMenu