사용법
기본
총 방문
12,847
+12.3%전환율
3.2%
-0.4%지난주 대비
크기
Small
128
Medium
1,024
Large
99,999
관리자 KPI 행
블로그 관리자의 StatChip·KpiCell 패턴처럼, Stat과 Sparkline을 Card에 묶어 지표 행을 구성할 수 있어요.
오늘 비용
LLM 사용
누적
$2.41
+12%-6일 $1.2. -5일 $1.8. -4일 $1.5. -3일 $2.1. -2일 $1.9. -1일 $2.4. 오늘 $2
실패 잡
오늘 / 전체
오늘
3
-2전체 41건
스타일 커스터마이징
Stat는 className과 style prop으로 루트 스타일을 덮어쓸 수 있어요.
<Stat className="rounded-full px-4" style={{ opacity: 0.9 }} />인터페이스
StatProps
| 속성 | 타입 | 기본값 | 설명 |
|---|---|---|---|
| label* | string | — | 지표 이름 |
| value* | string | — | 표시 값 |
| description | string | — | 보조 설명 |
| trend | "up" | "down" | "neutral" | — | 변화 방향 |
| trendValue | string | — | 변화율 텍스트 |
| size | "sm" | "md" | "lg" | md | 크기 |
| className | string | — | 루트 요소 클래스. Tailwind·커스텀 CSS 적용 |
| style | CSSProperties | — | 인라인 스타일·CSS 변수(--gtd-*) 오버라이드 |
Stat 컴포넌트 Props 표
가져오기
import { Stat } from "@/components/ui/Stat";