Patterns
StatCard
KPI/지표를 카드 형태로 표현하는 대시보드 핵심 컴포넌트입니다.
StatCard
대시보드에서 핵심 지표(KPI)를 시각적으로 전달하는 카드 컴포넌트입니다. 변동률과 트렌드 방향을 한눈에 파악할 수 있습니다.
Examples
총 거래액
₩2.4T
+12.5%전월 대비
공실률
8.3%
-2.1%전분기 대비
import { StatCard } from "@seoulpi/ui/stat-card";
import { DollarSign } from "lucide-react";
function Example() {
return (
<StatCard
title="총 거래액"
value="₩2.4T"
change="+12.5%"
trend="up"
description="전월 대비"
icon={<DollarSign className="size-5" />}
/>
);
}Variants
- Default: 넉넉한 패딩과 큰 숫자로 핵심 지표를 강조
- Compact: 사이드바나 좁은 공간에 최적화된 작은 레이아웃
Trend Indicators
- up: 상승 트렌드 (초록색)
- down: 하락 트렌드 (빨간색)
- neutral: 변동 없음 (음소거 색상)
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | 지표 이름 |
value | string | — | 핵심 숫자 |
change | string | — | 변동률 텍스트 |
trend | "up" | "down" | "neutral" | "neutral" | 변동 방향 |
description | string | — | 보조 설명 |
icon | ReactNode | — | 좌측 아이콘 |
variant | "default" | "compact" | "default" | 레이아웃 변형 |
Usage Notes
- 대시보드 상단에 2~4개의 StatCard를 그리드로 배치하는 것이 가장 효과적입니다.
trend속성에 따라 자동으로 색상과 아이콘이 결정되므로 별도 스타일링이 불필요합니다.