Skip to content
Docs
Back to Components

ProgressCard

@hua-labs/ui/advanced/dashboard
v1.0.0

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

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"Visual style variant
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/advanced/dashboard";

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/advanced/dashboard";

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/advanced/dashboard";

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>
  );
}
MetricCardTrendChartPro