reopt designreopt design
DocsExploreToolsPricingBuilder
Start
Overview
Start
Next.js 설치
Private install
Core Concepts
아키텍처
Composition Patterns
Accessibility
Keyboard Patterns
Styling
Theme System
Advanced Patterns
Build & Operate
Skills
AI Integration
CLI (opt surface add)
Dependency Graph
Tools
Canvas Catalog
Theme Builder
Form Builder
Templates
Templates
Releases
Release Notes
Oopt-ui
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.

StatCard

core

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

컴포넌트 의존 관계

깊이
▲ USED BY (3)dashboard-gridinsights-panelsummary-rowStatCard
100%

기본 사용

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

트렌드 변형

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

테스트 커버리지

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

StatCard Props

Prop타입기본값설명
title*string—통계 제목
value*string—통계 값
change*string—변화량 텍스트 (예: '+12.5%')
trend*"up" | "down" | "neutral"—트렌드 방향. 색상과 아이콘 결정

Import

tsx
import { StatCard } from "@reopt-ai/opt-ui";