Skip to content
Docs
Back to Components

StatCard

@hua-labs/ui/data
v1.0.0

A card component for displaying statistics with title, value, icon, and optional trend indicator. Perfect for dashboards and data visualization.

설치

bash
npm install @hua-labs/hua
Import
tsx
import { StatCard } from "@hua-labs/ui/data";

@hua-labs/ui의 UI 컴포넌트를 @hua-labs/hua에서 통합 제공합니다.

UI 컴포넌트, 모션 훅, i18n을 하나의 패키지로 사용할 수 있습니다.

Pro 컴포넌트입니다. Pro 라이선스가 필요합니다.

라이브 데모

기본 사용법

총 사용자

1,234

활성 사용자

추세 표시기 포함

매출

₩12,500,000

↑ 12.5%전월 대비
이탈률

2.3%

↓ 0.5%전월 대비

변형

default
기본

1,234

elevated
입체

1,234

gradient
그라디언트

1,234

outline
아웃라인

1,234

색상

blue

1,234

purple

1,234

green

1,234

orange

1,234

red

1,234

indigo

1,234

pink

1,234

gray

1,234

로딩 상태

로딩

Props

이름타입기본값설명
title*string-Card title displayed as a badge
value*string | number | null | undefined-Main statistic value
descriptionstring-Additional description text
iconIconName | React.ReactNode-Icon to display
trend{ value: number; label: string; positive?: boolean }-Trend indicator with percentage
variant"default" | "gradient" | "outline" | "elevated""elevated"시각적 스타일 변형
color"blue" | "purple" | "green" | "orange" | "red" | "indigo" | "pink" | "gray""blue"Color theme
loadingbooleanfalseShow loading skeleton
emptyStateReact.ReactNode-Custom empty state component

코드 예시

기본 사용법

BasicStatCard.tsxtsx
import { StatCard } from "@hua-labs/ui/data";

export function BasicStatCard() {
  return (
    <StatCard
      title="총 사용자"
      value="1,234"
      description="활성 사용자"
      icon="user"
    />
  );
}

추세 표시기 포함

StatCardWithTrend.tsxtsx
import { StatCard } from "@hua-labs/ui/data";

export function StatCardWithTrend() {
  return (
    <StatCard
      title="매출"
      value="₩12,500,000"
      icon="dollarSign"
      trend={{
        value: 12.5,
        label: "전월 대비",
        positive: true
      }}
      color="green"
      variant="gradient"
    />
  );
}

색상 변형

StatCardColors.tsxtsx
import { StatCard } from "@hua-labs/ui/data";

export function StatCardColors() {
  const colors = ["blue", "purple", "green", "orange", "red"];

  return (
    <div className="grid grid-cols-3 gap-4">
      {colors.map((color) => (
        <StatCard
          key={color}
          title={color}
          value="1,234"
          color={color}
          variant="gradient"
        />
      ))}
    </div>
  );
}