Command
Command palette: trigger opens a dialog with search and list of actions. Use ⌘K (or Ctrl+K) to open. Interactivity is provided by an inline script.
Add this component
Run the command below in your project directory. When prompted, select the component(s) you want. The CLI will copy the CSS and component files.
Choose your package manager — click a tab to select, then copy the command.
Live Example
Command palette
Usage
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
Astro Vanilla Svelte Vue React ---
import Command from '../components/astro/Command.astro';
---
<Command
triggerLabel="Open command palette (⌘K)"
searchPlaceholder="Search…"
items={[{ id: 'new', label: 'New file', shortcut: '⌘N' }, { id: 'save', label: 'Save', shortcut: '⌘S' }]}
client:load
/>
<!-- Rizzo CSS. Command palette: .command-root, .command__overlay, .command__dialog, .command__search, .command__list, .command__item. Add JS for open/close (e.g. data-command-trigger, ⌘K). See /docs/vanilla/components/command. -->
<div class="command-root">
<button type="button" class="btn btn-outline" data-command-trigger>Open command palette (⌘K)</button>
<div class="command__overlay" aria-hidden="true" hidden></div>
<div class="command__dialog" role="dialog" aria-modal="true" aria-label="Command palette" aria-hidden="true" hidden>
<div class="command__search-wrap"><input type="search" class="command__search" placeholder="Search…" /></div>
<div class="command__list" role="listbox"><button type="button" class="command__item">New file <kbd>⌘N</kbd></button><button type="button" class="command__item">Save <kbd>⌘S</kbd></button></div>
</div>
</div>
<script>
import { Command } from '$lib/rizzo';
</script>
<Command
triggerLabel="Open command palette (⌘K)"
searchPlaceholder="Search…"
items={[{ id: 'new', label: 'New file', shortcut: '⌘N' }, { id: 'save', label: 'Save', shortcut: '⌘S' }]}
/>
<script setup>
import Command from '@/components/rizzo/Command.vue';
</script>
<template>
<Command
trigger-label="Open command palette (⌘K)"
search-placeholder="Search…"
:items="[{ id: 'new', label: 'New file', shortcut: '⌘N' }, { id: 'save', label: 'Save', shortcut: '⌘S' }]"
/>
</template>
import { Command } from './components/react';
<Command
triggerLabel="Open command palette (⌘K)"
searchPlaceholder="Search…"
items={[{ id: 'new', label: 'New file', shortcut: '⌘N' }, { id: 'save', label: 'Save', shortcut: '⌘S' }]}
/>
Other frameworks: Vanilla · Svelte · Vue · React
npm 
pnpm 
yarn 
bun