reopt designreopt design
DocsExploreToolsPricingBuilder
Explore/
opt-ui161opt-charts21opt-datagrid5opt-editor5opt-chat6opt-shell14brandapp-ui8Examples12
Overview161Core55Blocks75Pages31
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.

Explore/Blocks/CommandPaletteTrigger

CommandPaletteTrigger

Block

CommandPalette + Cmd+K 키보드 단축키 자동 바인딩.

nav
Related docs
npx @reopt-ai/opt-cli surface add command-palette-trigger
100%

사용법

이 컴포넌트는 전역 키보드 단축키(Cmd+K / Ctrl+K)를 자동으로 등록합니다. 앱 루트 레이아웃에 한 번만 배치하면 됩니다. 현재 페이지에서 Cmd+K를 눌러 직접 확인할 수 있습니다.

tsx
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)}
/>

Dependencies

shellscommand-palette

Related components

CommandPalette

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

Nav

ContentTabs

탭 콘텐츠 패널. Tabs primitive 래퍼.

NavDisplay

SidebarNav

Composite 기반 사이드바 네비게이션. pathname 자동 동기화.

Nav

AppMenubar

데스크톱 스타일 메뉴바. 체크박스, 라디오 메뉴 항목 지원.

Nav

ProjectSwitcher

프로젝트 검색 전환기. Combobox + match-sorter 퍼지 검색 지원.

Nav

Sidebar

접기/펼치기를 지원하는 compound 사이드바. Header/Content/Footer 구조 + Group/Item으로 네비게이션 구성. Ctrl+[ 단축키.

Nav
PreviousCommandPaletteNextDeploymentTimeline

기본 사용 (Dialog)

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

Inline 모드

기본 사용

프로젝트 개요 콘텐츠입니다.

기본 선택 탭 설정

설정 탭이 기본 선택됩니다.

기본 사용

홈
대시보드
프로젝트
관리
설정
사용자
결제

기본 사용

기본 사용

선택된 프로젝트: my-app

실전 패턴 — 접기/펼치기 + 유저 프로필

MyApp
메뉴

시스템
김

김수현

sh@example.com

대시보드

Ctrl+[ 로 사이드바 토글

AppShell + Sidebar 조합

MyApp
Pro
워크스페이스홈인박스검색

프로젝트프로덕션개발 서버

홈

AppShell.Header + AppShell.Sidebar + AppShell.Content 조합

메인 콘텐츠 영역

© 2026 MyApp

side=right — 속성 패널

에디터 영역
속성
레이아웃

스타일