reopt designreopt design
DocsExploreToolsPricingBuilder
Start
Overview
Start
Next.js 설치
Private install
Core Concepts
아키텍처
Composition Patterns
Accessibility
Keyboard Patterns
Styling
Theme System
Advanced Patterns
Build & Operate
Skills
AI Integration
CLI (opt surface add)
Dependency Graph
Tools
Canvas Catalog
Theme Builder
Form Builder
Templates
Templates
Releases
Release Notes
Oopt-ui
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • GitHub
  • Terms of Service
  • Privacy Policy

© 2026 reopt-ai. All rights reserved.

CommandPalette

shell

Cmd+K 스타일 커맨드 팔레트. Dialog + Combobox + match-sorter 퍼지 검색.

컴포넌트 의존 관계

깊이
▲ USED BY (1)▼ USES (3)command-palette-triggerCommandPalettedialogcomboboxkbd
100%

기본 사용 (Dialog)

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

Inline 모드

테스트 커버리지

2026년 2월 4일4/4 통과
4성공
0실패
4전체
  • open=true일 때 dialog role을 갖는다
  • 검색 입력을 표시한다
  • 커맨드 항목을 표시한다
  • onSelect 콜백을 호출한다

CommandPalette Props

Prop타입기본값설명
commands*Omit<Command, "action">[]—커맨드 목록. { id, label, group, shortcut? }
open*boolean—열림 상태
onOpenChange*(open: boolean) => void—상태 변경 핸들러
onSelect(command: Omit<Command, 'action'>) => void—커맨드 선택 핸들러
inlinebooleanfalsetrue일 때 풀스크린 Dialog 대신 인라인 팝업으로 렌더링

Import

tsx
import { CommandPalette } from "@reopt-ai/opt-ui";