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

StatCard

Component

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

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

기본 사용

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

트렌드 변형

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

Related components

Kbd

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

Indicator

CompositeZone

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

Indicator

Toolbar

툴바 컨테이너 + 툴팁. 7 exports: ToolbarRoot, ToolbarContainer, ToolbarButton, ToolbarSeparator, TooltipProvider, TooltipAnchor, Tooltip.

Indicator

Badge

인라인 상태 뱃지. 5가지 색상 변형, 상태 점(dot) 옵션 지원.

Indicator

Spinner

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

Indicator

Skeleton

로딩 플레이스홀더. text/circular/rectangular 변형. 프리셋 컴포넌트 포함.

Indicator
PreviousAccordionNextCompositeZone

기본 사용

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

단일 키

EscEnterTabSpace

조합 키

Ctrl+Shift+P
⌘+K

연속 키 (순차 입력)

G HG GZ Z

기본 사용 (2D 그리드)

A1
A2
A3
B1
B2
B3

포커스 순환 비활성화

1
2
3

기본 사용


포커스 순환

Variants

DefaultInfoSuccessWarningError

With Dot

DefaultInfoSuccessWarningError

Sizes

SmallMedium

Sizes

Small (16px)

Medium (24px)

Large (32px)

Colors

Basic Shapes

Loading...
Loading...
Loading...
Loading...

SkeletonText

1 line

Loading...

3 lines

Loading...

SkeletonAvatar

Loading...
Loading...
Loading...
Loading...

SkeletonCard

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

SkeletonTable

Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...

Combined Example

Loading...
Loading...
Loading...
Loading...