Skip to content
Docs
Back to Components

StatCard

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

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

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

export function BasicStatCard() {
  return (
    <StatCard
      title=""
      value="1,234"
      description=""
      icon="user"
    />
  );
}

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

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

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