Skip to documentation
DocsEnterpriseCommandPalette
Component library

Enterprise / COMPONENT

CommandPalette

Web · implementedDesktop · partial

Dialog pencarian perintah dengan navigasi keyboard.

import { CommandPalette } from "./vendor/syne-ui/index.js";TypeScript ready
Live preview
  • Save

    Save your work

    Workspace

  • Open settings

    Workspace

  • Unavailable command

↑ ↓ navigate · Enter select · Esc close

Saved 0 times.

Interactive example · Try the controls with your mouse or keyboard.

Start with an example

Import the component and adapt it to your interface.

Example.tsxTSX
import { CommandPalette } from "./vendor/syne-ui/index.js";

export function Example() {
  return (
    <CommandPalette open={false} onClose={() => {}} commands={[{ id: "save", label: "Save", onSelect: () => console.log("Saved") }]} />
  );
}
Make it yours

Use className and --syne-* tokens to match your design system.