Skip to content
Docs

StatsPanel

@hua-labs/ui
v1.1.0

bash
npm install @hua-labs/hua
tsx
import { StatsPanel } from "@hua-labs/hua";
Pro

12,345
↑+12.5%
8,901
↑+8.2%
456
↓-3.1%
$123,456
↑+15.3%

$45,678
↑+23%
$37,123

StatsPanelItem Interface

interface StatsPanelItem {
  label: string;
  value: string | React.ReactNode;
  description?: string | React.ReactNode;
  trend?: "up" | "down" | "neutral";
  trendValue?: string;
  accent?: "primary" | "secondary" | "neutral" | "warning";
  icon?: React.ReactNode;
}

titlestring-Panel title
items*StatsPanelItem[]-Array of stat items
columns1 | 2 | 3 | 44Grid column count
loadingbooleanfalseShow loading skeleton

Code Examples

tsx
1import { StatsPanel } from '@hua-labs/hua';
2 
3<StatsPanel
4  items={[
5    { label: "Total Users", value: "1,234" },
6    { label: "Active Users", value: "567" },
7    { label: "Revenue", value: "$12,345" },
8    { label: "Orders", value: "89" },
9  ]}
10/>
tsx
1<StatsPanel
2  title="Monthly Statistics"
3  items={[
4    {
5      label: "Total Users",
6      value: "1,234",
7      trend: "up",
8      trendValue: "+12%",
9      accent: "primary",
10    },
11    {
12      label: "Active Users",
13      value: "567",
14      trend: "down",
15      trendValue: "-5%",
16      accent: "warning",
17    },
18  ]}
19  columns={2}
20/>
tsx
1<StatsPanel
2  items={[
3    {
4      label: "Users",
5      value: "1,234",
6      icon: <Users className="h-5 w-5" />,
7      accent: "primary",
8    },
9    {
10      label: "Revenue",
11      value: "$12,345",
12      icon: <CurrencyDollar className="h-5 w-5" />,
13      accent: "secondary",
14    },
15  ]}
16/>

  • •:
  • •:
KanbanBoardProEmotionPro