CommandPalette — usage examples

CommandPalette ships as six pre-compiled, per-framework packages from a single .rozie source — install only the one for your framework (no Rozie toolchain, no build-time compile step). Each carries its engine + framework peers as peer dependencies, so you control their versions. The snippets below are the same idiomatic consumption code shown in each package's README; switch the tab to your framework.

Usage

React

import { useState } from 'react';
import { CommandPalette } from '@rozie-ui/command-palette-react';
import '@rozie-ui/command-palette-react/themes/base.css';

const commands = [
  { id: 'new', label: 'New File', group: 'File', keywords: ['create'] },
  { id: 'open', label: 'Open File', group: 'File' },
  { id: 'settings', label: 'Preferences', group: 'App' },
];

export function Demo() {
  const [open, setOpen] = useState(false);
  const [query, setQuery] = useState('');
  return (
    <>
      <button onClick={() => setOpen(true)}>Open palette (⌘K)</button>
      <CommandPalette
        open={open}
        onOpenChange={setOpen}
        query={query}
        onQueryChange={setQuery}
        items={commands}
        onSelect={(e) => console.log('ran:', e.id)}
      />
    </>
  );
}

Vue

<script setup lang="ts">
import { ref } from 'vue';
import CommandPalette from '@rozie-ui/command-palette-vue';
import '@rozie-ui/command-palette-vue/themes/base.css';

const open = ref(false);
const query = ref('');
const commands = [
  { id: 'new', label: 'New File', group: 'File', keywords: ['create'] },
  { id: 'open', label: 'Open File', group: 'File' },
  { id: 'settings', label: 'Preferences', group: 'App' },
];
function onSelect(e: { id: string }) {
  console.log('ran:', e.id);
}
</script>

<template>
  <button @click="open = true">Open palette (⌘K)</button>
  <CommandPalette v-model:open="open" v-model:query="query" :items="commands" @select="onSelect" />
</template>

Svelte

<script lang="ts">
  import CommandPalette from '@rozie-ui/command-palette-svelte';
  import '@rozie-ui/command-palette-svelte/themes/base.css';

  let open = $state(false);
  let query = $state('');
  const commands = [
    { id: 'new', label: 'New File', group: 'File', keywords: ['create'] },
    { id: 'open', label: 'Open File', group: 'File' },
    { id: 'settings', label: 'Preferences', group: 'App' },
  ];
</script>

<button onclick={() => (open = true)}>Open palette (⌘K)</button>
<CommandPalette
  bind:open
  bind:query
  items={commands}
  onselect={(e) => console.log('ran:', e.id)}
/>

Angular

import { Component } from '@angular/core';
import { CommandPalette } from '@rozie-ui/command-palette-angular';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [CommandPalette],
  template: `
    <button (click)="open = true">Open palette (⌘K)</button>
    <CommandPalette [(open)]="open" [(query)]="query" [items]="commands" (select)="onSelect($event)" />
  `,
})
export class DemoComponent {
  open = false;
  query = '';
  commands = [
    { id: 'new', label: 'New File', group: 'File', keywords: ['create'] },
    { id: 'open', label: 'Open File', group: 'File' },
    { id: 'settings', label: 'Preferences', group: 'App' },
  ];
  onSelect(e: { id: string }) {
    console.log('ran:', e.id);
  }
}

Solid

import { createSignal } from 'solid-js';
import { CommandPalette } from '@rozie-ui/command-palette-solid';
import '@rozie-ui/command-palette-solid/themes/base.css';

const commands = [
  { id: 'new', label: 'New File', group: 'File', keywords: ['create'] },
  { id: 'open', label: 'Open File', group: 'File' },
  { id: 'settings', label: 'Preferences', group: 'App' },
];

export function Demo() {
  const [open, setOpen] = createSignal(false);
  const [query, setQuery] = createSignal('');
  return (
    <>
      <button onClick={() => setOpen(true)}>Open palette (⌘K)</button>
      <CommandPalette
        open={open()}
        onOpenChange={setOpen}
        query={query()}
        onQueryChange={setQuery}
        items={commands}
        onSelect={(e) => console.log('ran:', e.id)}
      />
    </>
  );
}

Lit

import '@rozie-ui/command-palette-lit';
import '@rozie-ui/command-palette-lit/themes/base.css';

// <rozie-command-palette> is a custom element. Bind `items` as a property,
// two-way `open`/`query` via the `open-change`/`query-change` events, and
// listen for `select` to run the chosen command.
const el = document.querySelector('rozie-command-palette');
el.items = [
  { id: 'new', label: 'New File', group: 'File', keywords: ['create'] },
  { id: 'open', label: 'Open File', group: 'File' },
];
el.addEventListener('open-change', (e) => { el.open = e.detail.open; });
el.addEventListener('query-change', (e) => { el.query = e.detail; });
el.addEventListener('select', (e) => { console.log('ran:', e.detail.id); });
el.open = true;

Imperative handle

Beyond props and events, CommandPalette exposes imperative methods (declared once in the .rozie source via $expose). Grab a handle through your framework's native ref mechanism and call them directly:

React

import { useRef } from 'react';
import { CommandPalette, type CommandPaletteHandle } from '@rozie-ui/command-palette-react';

const palette = useRef<CommandPaletteHandle>(null);
// <CommandPalette ref={palette} ... />
palette.current?.show();
palette.current?.toggle();
palette.current?.close();

Vue

<script setup>
import { ref } from 'vue';
const palette = ref();          // template ref
</script>

<template>
  <CommandPalette ref="palette" v-model:open="open" :items="commands" />
  <button @click="palette.toggle()">⌘K</button>
</template>

Svelte

<script>
  let palette;                  // component instance via bind:this
</script>

<CommandPalette bind:this={palette} bind:open :items={commands} />
<button onclick={() => palette.toggle()}>⌘K</button>

Angular

@Component({ /* ... */ })
export class DemoComponent {
  @ViewChild(CommandPalette) palette!: CommandPalette;   // or the viewChild() signal
  openIt() { this.palette.show(); }
  toggleIt() { this.palette.toggle(); }
}

Solid

import { CommandPalette, type CommandPaletteHandle } from '@rozie-ui/command-palette-solid';

let handle: CommandPaletteHandle | undefined;
// The ref callback receives the HANDLE object (not the DOM node).
<CommandPalette ref={(h) => (handle = h)} open={open()} items={commands} />;
handle?.toggle();

Lit

// The custom element IS the handle — exposed methods are public element
// methods. `focus()` here DELIBERATELY overrides the inherited HTMLElement.focus
// (it focuses the search input).
const el = document.querySelector('rozie-command-palette');
el.show();
el.toggle();
el.focus();

See also

• CommandPalette — showcase & API — the full prop / event / slot / handle reference, theming, and accessibility.
• CommandPalette comparison — how it stacks up against the per-framework libraries.
• CommandPalette — live demo — the real package running in the page, plus the one .rozie source and all six generated outputs.