reopt designreopt design
DocsExploreToolsPricingBuilder
Login
Explore/
opt-ui205opt-charts40opt-datagrid9opt-editor5opt-calendar4opt-filemanager4opt-chat6opt-shell14brandapp-ui8Examples12Builder Blocks
Overview205Core74Shells99Blocks32
reopt designreopt design

A design system for the AI era

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

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

© 2026 reopt Inc. All rights reserved.

Explore/Core/StatCard

StatCard

Component

단일 지표를 값·변화량·보조 설명으로 표시하는 통계 카드. 비교 기준이 없으면 변화량 줄을 렌더하지 않는다.

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

의미와 선택 상태를 가진 지표

Selected metric: revenue

로딩과 밀도

Query latency184ms↓ -12ms

StatCard

PropTypeDefaultDescription
title*string—통계 제목
value*string—통계 값
changestring—변화량 텍스트 (예: '+12.5%'). 비교 기준이 없으면 생략 — trend와 함께 있을 때만 렌더된다
trend"up" | "down" | "neutral"—변화 방향. change와 함께 있을 때만 의미를 갖는다
polarity"positive" | "negative""positive"상승이 좋은 지표인지. 이탈률·에러 수처럼 반대인 지표는 negative로 색을 뒤집는다
descriptionstring—값 아래 한 줄 보조 설명 (집계 대상·기간 등)
hintstring—산출 근거 등 긴 설명. 툴팁과 aria-describedby로 노출
size"sm" | "md""md"밀도 프리셋. 요약 행에는 sm
loadingbooleanfalse값 로딩 중 스켈레톤 표시
hrefstring—드릴다운 링크. 지정 시 카드가 앵커로 렌더된다
onSelect() => void—드릴다운 핸들러. 지정 시 카드가 버튼으로 렌더된다
selectedbooleanfalse선택 가능한 카드 행에서 현재 선택 상태
sparklineDatanumber[]—값 옆에 그릴 미니 추세선 데이터

컴포넌트 의존 관계

깊이
▲ USED BY (3)dashboard-gridinsights-panelsummary-rowStatCard
View test results

테스트 커버리지

2026년 7월 9일3/3 통과
3성공
0실패
3전체
  • title, value, change를 렌더링한다
  • 상승 트렌드에 상승 아이콘을 표시한다
  • 하락 트렌드에 하락 아이콘을 표시한다

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가지 크기와 장식용 aria-hidden 모드를 지원합니다.

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...