Playground

Turn the options and watch it change. The code below changes with it, in whichever framework you are using — copy it and you have what is on the screen.

Live

Hotkey mod is ⌘ on a Mac and Ctrl everywhere else.

Placeholder

Footer

Limit Rows shown at once.

Max Recents

Min Chars Characters before an async source is asked.

import { createCommandPalette } from '@devix-labs/command-palette';
import '@devix-labs/command-palette/styles.css';

createCommandPalette({
  hotkey: 'mod+k',
  placeholder: 'Type a command or search…',
  footer: true,
  limit: 8,
  maxRecents: 3,
  minChars: 0
});

import { useCommandPalette, useCommands } from '@devix-labs/command-palette/react';
import '@devix-labs/command-palette/styles.css';

const palette = useCommandPalette({
  hotkey: 'mod+k',
  placeholder: 'Type a command or search…',
  footer: true,
  limit: 8,
  maxRecents: 3,
  minChars: 0
});

useCommands(palette, [
  { id: 'invoice', title: 'New invoice', section: 'Create', perform: () => open() },
]);

<script setup>
import { useCommandPalette } from '@devix-labs/command-palette/vue';
import '@devix-labs/command-palette/styles.css';

const palette = useCommandPalette({
  hotkey: 'mod+k',
  placeholder: 'Type a command or search…',
  footer: true,
  limit: 8,
  maxRecents: 3,
  minChars: 0
});
palette.register({ id: 'invoice', title: 'New invoice', perform: () => open() });
</script>

<template>
  <button @click="palette.open()">Search…</button>
</template>

<script>
  import { createCommandPalette } from '@devix-labs/command-palette/svelte';
  import '@devix-labs/command-palette/styles.css';

  const palette = createCommandPalette({
  hotkey: 'mod+k',
  placeholder: 'Type a command or search…',
  footer: true,
  limit: 8,
  maxRecents: 3,
  minChars: 0
});
  palette.register({ id: 'invoice', title: 'New invoice', perform: () => open() });
</script>

<button on:click={() => palette.open()}>Search…</button>

Every option here is in the documentation, along with the ones that are not worth a control.