Command Palette

format
  • Format DocumentEditor
  • Format SelectionEditor
  • Reveal in File ExplorerFile
About this piece

Command Palette

Command palette card with a search bar, ranked results, hint captions, and kbd shortcut pills.

Usage

The import and the props worth knowing about, in one place.

import { Editor9 } from "@/components/beste/piece/editor9";

<Editor9
  query="format"
  commands={[
    {
      "label": "Format Document",
      "hint": "Editor",
      "shortcut": [
        "⌥",
        "⇧",
        "F"
      ]
    },
    {
      "label": "Format Selection",
      "hint": "Editor",
      "shortcut": [
        "⌘",
        "K",
        "F"
      ]
    },
    {
      "label": "Reveal in File Explorer",
      "hint": "File"
    }
  ]}
/>

More Editor pieces

View all Editor
Theme

Theme Switcher

Settings card with a segmented light / dark / system toggle and icon plus label per option.

Keybindings
  • Command palette
    ⌘+K
  • Quick open
    ⌘+P
  • Toggle terminal
    ⌃+`
  • Format document
    ⌥+⇧+F

Keymap List

Panel listing editor actions with their kbd shortcut combinations on the right.

return greet(name);
Ayşe

Collab Cursor

Code line with a teammate's blinking caret tinted by tone and a name tag floating above it.

Outline
  • Dashboard
  • constructor
  • state
  • render
  • computeStats

Outline Panel

Document outline with colored kind tiles for class, function, method, and prop. Depth-indented with an active row.

greet.ts
export function greet(name: string) {
  return `Hello, ${name}!`;
}
 
// Ship it

Code Window

Theme-adaptive editor window with traffic-light header, filename, and a tokenized code body.

Zen Modemanifesto.md
Exit⌘+K+Z

Zen Mode

Minimal focus card with a focus icon, current filename, and an exit-shortcut reminder.