Stat Card

A compact KPI card for displaying a single metric with optional trend indicator and icon

Total Value Locked

$124.5M+8.2%

24h Volume

$2.1B-3.2%

import { StatCard } from "@/components/sol/stat-card";

export function StatCardDemo() {
  return (
    <StatCard
      label="Total Value Locked"
      value="$124.5M"
      change="+8.2%"
    />
  );
}

Installation

pnpm dlx shadcn@latest add @solanaui/stat-card

npx shadcn@latest add @solanaui/stat-card

yarn dlx shadcn@latest add @solanaui/stat-card

Usage

<StatCard
  label="Total Value Locked"
  value="$124.5M"
  change="+8.2%"
  trend="up"
/>

Source Code

import type React from "react";
import { TrendBadge } from "@/registry/sol/trend-badge";
import { Card } from "@/components/ui/card";
import { cn } from "@/lib/utils";

interface StatCardProps extends React.ComponentProps<typeof Card> {
  label: string;
  value: string;
  change?: string;
  trend?: "up" | "down";
  icon?: React.ReactNode;
}

const StatCard = ({
  label,
  value,
  change,
  trend = "up",
  icon,
  className,
  ...props
}: StatCardProps) => {
  return (
    <Card className={cn("p-4 gap-2", className)} {...props}>
      <div className="flex items-center justify-between">
        <span className="text-sm text-muted-foreground">{label}</span>
        {icon && <span className="text-muted-foreground">{icon}</span>}
      </div>
      <div className="flex items-end justify-between gap-2">
        <span className="text-2xl font-semibold tracking-tight">{value}</span>
        {change && <TrendBadge trend={trend}>{change}</TrendBadge>}
      </div>
    </Card>
  );
};

export type { StatCardProps };
export { StatCard };

import type React from "react";import { TrendBadge } from "@/registry/sol/trend-badge";import { Card } from "@/components/ui/card";import { cn } from "@/lib/utils";interface StatCardProps extends React.ComponentProps<typeof Card> {  label: string;  value: string;  change?: string;  trend?: "up" | "down";  icon?: React.ReactNode;}const StatCard = ({  label,  value,  change,  trend = "up",  icon,  className,  ...props}: StatCardProps) => {  return (    <Card className={cn("p-4 gap-2", className)} {...props}>      <div className="flex items-center justify-between">        <span className="text-sm text-muted-foreground">{label}</span>        {icon && <span className="text-muted-foreground">{icon}</span>}      </div>      <div className="flex items-end justify-between gap-2">        <span className="text-2xl font-semibold tracking-tight">{value}</span>        {change && <TrendBadge trend={trend}>{change}</TrendBadge>}      </div>    </Card>  );};export type { StatCardProps };export { StatCard };

Installation

Usage

Source Code

On this page