CommandPalette
ShellsFind commands with a Cmd+K-style palette combining Dialog, Combobox, and fuzzy search.
Open CommandPalette with an automatically bound Cmd+K shortcut.
bun add @reopt-ai/opt-uiimport { CommandPaletteTrigger } from "@reopt-ai/opt-ui";Change the width and theme, then interact with the components.
이 컴포넌트는 전역 키보드 단축키(Cmd+K / Ctrl+K)를 자동으로 등록합니다. 앱 루트 레이아웃에 한 번만 배치하면 됩니다. 현재 페이지에서 Cmd+K를 눌러 직접 확인할 수 있습니다.
import { CommandPaletteTrigger } from "@reopt-ai/opt-ui";
const commands = [
{ id: "nav-home", label: "홈으로 이동", group: "네비게이션", shortcut: "G H" },
{ id: "nav-dashboard", label: "대시보드 열기", group: "네비게이션" },
{ id: "theme-dark", label: "다크 모드", group: "테마" },
];
// 앱 루트에 배치 — Cmd+K로 자동 열림
<CommandPaletteTrigger
commands={commands}
onSelect={(cmd) => console.log("선택:", cmd.label)}
/>Find commands with a Cmd+K-style palette combining Dialog, Combobox, and fuzzy search.
Switch between content panels with a wrapper around the Tabs primitive.
Navigate a sidebar with Composite keyboard support and automatic pathname synchronization.
Use a desktop-style menu bar with checkbox and radio menu items.
Search and switch projects with a fuzzy-search combobox.
Compose collapsible navigation with header, content, footer, groups, and items, plus a Ctrl+[ shortcut.