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/Core/OtpField

OtpField

Component

일회용 코드(OTP)/PIN 입력. 셀 단위 입력, 붙여넣기 분배, 자동 포커스 이동, 백스페이스 네비게이션 지원.

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

기본 6자리 (숫자)

인증 코드

입력: (없음)

4자리 PIN (마스킹)

PIN

영숫자 8자리

초대 코드

Related components

Separator

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

Toggle

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

Accordion

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

Command

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

Kbd

키보드 단축키를 시각적으로 표시하는 인라인 뱃지 컴포넌트.

Indicator

StatCard

트렌드 방향과 변화량을 표시하는 통계 카드.

Indicator
PreviousSeparatorNextToggle

가로 구분선

위 콘텐츠

아래 콘텐츠

라벨 구분선

또는

세로 구분선

프로필
설정
로그아웃

단독 Toggle

상태: 꺼짐

단일 선택 그룹 (정렬)

선택: left

다중 선택 그룹 (서식)

선택: bold

단일 (collapsible)

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

다중 (multiple)

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

Inline Command

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

CommandDialog (Cmd+K 스타일)

기본 사용

Command Palette를 열려면Ctrl+K를 누르세요

단일 키

EscEnterTabSpace

조합 키

Ctrl+Shift+P
⌘+K

연속 키 (순차 입력)

G HG GZ Z

기본 사용

총 매출₩12,450,000↑ +12.5%

트렌드 변형

방문자3,420↑ +8.2%
이탈률32.1%↓ -4.3%
전환율2.4%→ 0.0%