reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
CommandPalette
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

CommandPalette

Shell

Find commands with a Cmd+K-style palette combining Dialog, Combobox, and fuzzy search.

nav
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { CommandPalette } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

기본 사용 (Dialog)

또는 Cmd+K (전역 트리거가 활성화된 경우)

Inline 모드

CommandPalette

PropTypeDefaultDescription
commandsRequiredOmit<CommandDef, "action">[]—커맨드 목록. { id, label, group, shortcut? }
openRequiredboolean—열림 상태
onOpenChangeRequired(open: boolean) => void—상태 변경 핸들러
onSelect(command: Omit<CommandDef, "action">) => void—커맨드 선택 핸들러
inlinebooleanfalsetrue일 때 풀스크린 Dialog 대신 인라인 팝업으로 렌더링
labelsCommandPaletteLabels—title/description/input/list/empty/escape 문구
footerReactNode—명령 목록 아래에 표시할 footer slot
emptyReactNode—결과가 없을 때 표시할 empty slot
inputTrailingReactNode—검색 입력 우측 보조 콘텐츠

컴포넌트 의존 관계

깊이
▲ USED BY (1)▼ USES (3)command-palette-triggerCommandPalettedialogcomboboxkbd
View test results

테스트 커버리지

2026년 7월 9일5/5 통과
5성공
0실패
5전체
  • inline open=false이면 렌더링하지 않는다
  • 명령이 없으면 빈 상태를 표시한다
  • labels, empty, footer, trailing 슬롯을 접근성 이름에 연결한다
  • inline palette에서 명령 선택 시 onSelect 후 닫기 요청을 보낸다
  • 검색어로 listbox 항목을 필터링하고 Enter로 활성 항목을 선택한다

Related components

opt-ui

CommandPaletteTrigger

Shells

Open CommandPalette with an automatically bound Cmd+K shortcut.

opt-ui

ContentTabs

Shells

Switch between content panels with a wrapper around the Tabs primitive.

opt-ui

SidebarNav

Shells

Navigate a sidebar with Composite keyboard support and automatic pathname synchronization.

opt-ui

AppMenubar

Shells

Use a desktop-style menu bar with checkbox and radio menu items.

opt-ui

ProjectSwitcher

Shells

Search and switch projects with a fuzzy-search combobox.

opt-ui

Sidebar

Shells

Compose collapsible navigation with header, content, footer, groups, and items, plus a Ctrl+[ shortcut.

PreviousAppMenubarNextCommandPaletteTrigger