reopt designreopt design
DocsExploreToolsPricingBuilder
Login
Explore/
opt-ui165opt-charts33opt-datagrid6opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
Overview165Core59Shells75Blocks31
reopt designreopt design

A design system for the AI era

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

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

© 2026 reopt Inc. All rights reserved.

Explore/Core/Command

Command

Component

cmdk 스타일 명령 anatomy. 자동 필터링 + 키보드 내비게이션. 인라인 또는 CommandDialog로 사용.

Related docs
bun add @reopt-ai/opt-ui
100%

Inline Command

결과가 없습니다.
네비게이션
홈으로 이동G H
대시보드 열기G D
작업
새 이슈 생성C
전체 검색/

CommandDialog (Cmd+K 스타일)

테스트 커버리지

2026년 7월 9일1/1 통과
1성공
0실패
1전체
  • command dialog에 제목, 설명, 입력, 그룹, shortcut을 연결한다

키보드 동작

키동작
↑ ↓활성 항목 이동
Home / End처음/마지막 항목
Enter활성 항목 선택
Escdialog 닫기

Related components

Text

본문, 레이블, 보조 설명, 코드에 일관된 의미 기반 타이포그래피를 적용합니다.

Heading

문서의 의미 계층과 시각적 타이포그래피 계층을 독립적으로 제어합니다.

Separator

콘텐츠를 구분하는 가로/세로 디바이더. 라벨을 넣으면 가운데 정렬 구분선이 된다.

OtpField

일회용 코드(OTP)/PIN 입력. 셀 단위 입력, 붙여넣기 분배, 자동 포커스 이동, 백스페이스 네비게이션과 폼 이름/오류 연결을 지원합니다.

Toggle

눌림(pressed) 두 상태 버튼. 단독 사용하거나 ToggleGroup으로 묶어 단일/다중 선택을 만든다.

Accordion

수직으로 쌓인 펼침/접힘 패널. single(한 개)/multiple(여러 개) 모드와 collapsible 지원.

PreviousErrorBoundaryNextShaderSurface

텍스트 역할과 톤

본문은 body 역할의 semantic token을 사용합니다.

레이블 텍스트보조 설명 텍스트npm install @reopt-ai/opt-ui

Heading 의미와 시각적 계층

Display 스타일, h4 의미

섹션 스타일, h5 의미
중첩 스타일, h6 의미

가로 구분선

위 콘텐츠

아래 콘텐츠

라벨 구분선

또는

세로 구분선

프로필
설정
로그아웃

기본 6자리 (숫자)

인증 코드

입력: (없음)

4자리 PIN (마스킹)

PIN

영숫자 8자리

초대 코드

단독 Toggle

상태: 꺼짐

단일 선택 그룹 (정렬)

선택: left

다중 선택 그룹 (서식)

선택: bold

단일 (collapsible)

Core·Shells·Surfaces로 구성된 공유 UI 컴포넌트 라이브러리입니다. 차트는 opt-charts가 담당합니다.

다중 (multiple)

여러 패널을 동시에 열 수 있습니다.
이 패널도 함께 열려 있습니다.