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/LoadingOverlay

LoadingOverlay

Component

로딩 오버레이. Spinner + 반투명 배경으로 콘텐츠 위에 로딩 상태를 표시합니다.

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

기본 사용

콘텐츠 영역

이 영역 위에 로딩 오버레이가 표시됩니다.

Dependencies

corespinner

Related components

Spinner

로딩 상태 표시 스피너. 3가지 크기 지원.

Indicator

Alert

알림 메시지 컴포넌트. 4가지 변형(info, success, warning, error), 제목/본문/닫기 버튼 지원.

FeedbackIndicator

AlertManager

알림 관리 Surface. DataTable + AlertBuilder 조합.

Feedback

Kbd

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

Indicator

StatCard

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

Indicator

CompositeZone

Composite 기반 2D 키보드 탐색 컨테이너. 화살표 키로 자식 요소 간 이동 가능.

Indicator
PreviousVirtualListNextStarRating

Sizes

Small (16px)

Medium (24px)

Large (32px)

Colors

Variants

Information

This is an informational message.

Success

Operation completed successfully.

Warning

Please review before proceeding.

Error

Something went wrong.

Dismissible

닫기 버튼이 있는 Alert

Dismissible Info

Click the X to dismiss this alert.

Dismissible Success

Your changes have been saved.

Without Title

A simple alert without a title.
This action cannot be undone.

기본 사용

Alerts

Data Table

NameFrequencyChannelsStatus
High Error Raterealtimeemail, slackActive
Low ConversionhourlyemailInactive

기본 사용

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%

기본 사용 (2D 그리드)

A1
A2
A3
B1
B2
B3

포커스 순환 비활성화

1
2
3