MetricCard

v1.0.0

bash

npm install @hua-labs/hua

tsx

import { MetricCard } from "@hua-labs/ui/advanced/dashboard";

10,234

5,678

100개

100

200개

200

150개

150

300개

300

250개

250

180개

180

220개

220

1,234

50개

80개

120개

120

90개

150개

150

110개

110

140개

140

4.5%

↑ 12.5%

32.1%

↓ 5.2%

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`	-	Main metric value
`description`	`string`	-	Additional description text
`icon`	`IconName \| React.ReactNode`	-	Icon to display
`trend`	`{ value: number; label: string; positive?: boolean }`	-	Trend indicator with percentage
`chartData`	`number[]`	-	Array of numbers for the mini bar chart
`chartLabels`	`string[]`	-	Labels for each bar in the chart
`showChart`	`boolean`	`false`	Whether to show the mini bar chart
`variant`	`"default" \| "gradient" \| "outline" \| "elevated"`	`"elevated"`	Visual style variant
`color`	`"blue" \| "purple" \| "green" \| "orange" \| "red" \| "indigo" \| "pink" \| "gray"`	`"blue"`	Color theme
`loading`	`boolean`	`false`	Show loading skeleton

BasicMetricCard.tsxtsx

import { MetricCard } from "@hua-labs/ui/advanced/dashboard";

export function BasicMetricCard() {
  return (
    <MetricCard
      title="Page Views"
      value="10,234"
      description="Today"
      icon="eye"
    />
  );
}

MetricCardWithChart.tsxtsx

import { MetricCard } from "@hua-labs/ui/advanced/dashboard";

export function MetricCardWithChart() {
  return (
    <MetricCard
      title="Visitors"
      value="5,678"
      chartData={[100, 200, 150, 300, 250, 180, 220]}
      chartLabels={["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]}
      showChart
      color="blue"
      variant="elevated"
    />
  );
}

MetricCardWithTrend.tsxtsx

import { MetricCard } from "@hua-labs/ui/advanced/dashboard";

export function MetricCardWithTrend() {
  return (
    <MetricCard
      title="Conversion Rate"
      value="4.5%"
      icon="chartLine"
      trend={{
        value: 12.5,
        label: "vs last week",
        positive: true
      }}
      color="green"
      variant="gradient"
    />
  );
}

StatCard ProgressCard