Skip to content
Docs
Back to Components

ProgressCard

@hua-labs/ui/data
v1.0.0

A card component for displaying progress with a visual progress bar. Perfect for showing goal achievement, task completion, or any value comparison.

설치

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

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

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

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

라이브 데모

기본 사용법

Goal Achievement

This month's goal

75/ 100
75.0%

With Unit

Sales

1,250units/ 2,000units
62.5%

Storage

75GB/ 100GB
75.0%

변형

default

Default

60/ 100
60.0%
elevated

Elevated

60/ 100
60.0%
gradient

Gradient

60/ 100
60.0%
outline

Outline

60/ 100
60.0%

크기

size="sm"

Small

30/ 100
30.0%

size="md" (default)

Medium

60/ 100
60.0%

size="lg"

Large

90/ 100
90.0%

색상

blue

30
30.0%

purple

40
40.0%

green

50
50.0%

orange

60
60.0%

red

70
70.0%

indigo

80
80.0%

pink

90
90.0%

gray

100
100.0%

로딩 상태

Loading

Props

이름타입기본값설명
title*string-Card title
current*number-Current progress value
total*number-Total/target value
unitstring""Unit suffix for the values
descriptionstring-Additional description text
iconIconName | React.ReactNode-Icon to display
color"blue" | "purple" | "green" | "orange" | "red" | "indigo" | "pink" | "gray""blue"Color theme
variant"default" | "gradient" | "outline" | "elevated""elevated"시각적 스타일 변형
showPercentagebooleantrueWhether to show percentage
showLabelbooleantrueWhether to show the total label
size"sm" | "md" | "lg""md"Size of the card
loadingbooleanfalseShow loading skeleton

코드 예시

기본 사용법

BasicProgressCard.tsxtsx
import { ProgressCard } from "@hua-labs/ui/data";

export function BasicProgressCard() {
  return (
    <ProgressCard
      title="Goal Achievement"
      current={75}
      total={100}
      description="This month's goal"
      icon="target"
    />
  );
}

With Unit

ProgressCardWithUnit.tsxtsx
import { ProgressCard } from "@hua-labs/ui/data";

export function ProgressCardWithUnit() {
  return (
    <ProgressCard
      title="Sales"
      current={1250}
      total={2000}
      unit="units"
      icon="shoppingCart"
      color="green"
    />
  );
}

Size Variants

ProgressCardSizes.tsxtsx
import { ProgressCard } from "@hua-labs/ui/data";

export function ProgressCardSizes() {
  return (
    <div className="space-y-4">
      <ProgressCard
        title="Small"
        current={30}
        total={100}
        size="sm"
      />
      <ProgressCard
        title="Medium"
        current={60}
        total={100}
        size="md"
      />
      <ProgressCard
        title="Large"
        current={90}
        total={100}
        size="lg"
      />
    </div>
  );
}