SummaryCard

@hua-labs/ui/data

v1.0.0

A card component for displaying summary information with title, value, subtitle, and optional action button.

설치

bash

npm install @hua-labs/hua

Import

tsx

import { SummaryCard } from "@hua-labs/ui/data";

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

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

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

라이브 데모

기본 사용법

Total Revenue

₩10,000,000

This month

Orders

1,234

Today

변형

default

Default

1,234

gradient

Gradient

1,234

outline

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

뱃지 포함

New Signups

+12%

256

This week

Active Users

Live

1,892

Current

로딩 상태

Props

이름	타입	기본값	설명
`title*`	`string`	-	Card title
`value*`	`string \| number`	-	Summary value to display
`subtitle`	`string`	-	Subtitle text below the value
`icon`	`IconName \| React.ReactNode`	-	Icon to display
`color`	`"blue" \| "purple" \| "green" \| "orange" \| "red" \| "indigo" \| "pink" \| "gray"`	`"blue"`	Color theme
`variant`	`"default" \| "gradient" \| "outline"`	`"default"`	시각적 스타일 변형
`href`	`string`	-	Link URL for action button
`onClick`	`() => void`	-	클릭 핸들러
`loading`	`boolean`	`false`	Show loading state
`badge`	`string \| React.ReactNode`	-	Badge to display in header
`footer`	`React.ReactNode`	-	Footer content
`showAction`	`boolean`	`true`	Whether to show action button
`actionLabel`	`string`	`"View Details"`	Action button label

코드 예시

기본 사용법

BasicSummaryCard.tsxtsx

import { SummaryCard } from "@hua-labs/ui/data";

export function BasicSummaryCard() {
  return (
    <SummaryCard
      title="Total Revenue"
      value="₩10,000,000"
      subtitle="This month"
      icon="dollarSign"
      href="/revenue"
    />
  );
}

변형

SummaryCardVariants.tsxtsx

import { SummaryCard } from "@hua-labs/ui/data";

export function SummaryCardVariants() {
  return (
    <div className="grid grid-cols-3 gap-4">
      <SummaryCard
        title="Orders"
        value="1,234"
        variant="default"
        color="blue"
      />
      <SummaryCard
        title="Revenue"
        value="₩5,000,000"
        variant="gradient"
        color="purple"
      />
      <SummaryCard
        title="Customers"
        value="567"
        variant="outline"
        color="green"
      />
    </div>
  );
}

MembershipBadgePro NotificationCard