CommandMenu

Everything the app can do, behind one shortcut.

Import it from rei-kit/web: import { CommandMenu } from 'rei-kit/web'

Open CommandMenu in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.

Usage

<script setup lang="ts">
import { ref } from 'vue'
import { FileText, Settings } from 'lucide-vue-next'
import { BaseButton } from 'rei-kit'
import { CommandMenu } from 'rei-kit/web'
import type { CommandGroup } from 'rei-kit/web'

const open = ref(false)

const groups: CommandGroup<'new' | 'settings'>[] = [
  {
    label: 'Entries',
    items: [{ id: 'new', label: 'Write an entry', hint: '⌘N', icon: FileText, keywords: ['add'] }],
  },
  { label: 'App', items: [{ id: 'settings', label: 'Open settings', icon: Settings }] },
]

function run(id: 'new' | 'settings') {
  console.log(id)
}
</script>

<template>
  <BaseButton variant="secondary" @click="open = true">Commands (⌘K)</BaseButton>

  <CommandMenu
    v-model="open"
    :groups="groups"
    label="Commands"
    placeholder="Type a command or search"
    empty-label="Nothing found"
    hotkey="k"
    @select="run"
  />
</template>

Props

Props
Prop	Type	Required or default	What it is for
`groups`	`readonly CommandGroup<Id>[]`	yes
`label`	`string`	yes	The dialog's accessible name, e.g. "Commands".
`placeholder`	`string`	yes	The field's placeholder, e.g. "Type a command or search".
`emptyLabel`	`string`	yes	Shown when nothing matches, e.g. "Nothing found".
`hotkey`	`string`	undefined	The letter that opens it with ⌘ or Ctrl. Unset, the app opens it itself.

About rei-kit

rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.

pnpm add rei-kit · npm · GitHub