DataCard

The DataCard component displays a single metric or KPI with a label, value, optional description, and trend indicator. It is designed for dashboards and analytics views where key numbers need to stand out.

Import

import { DataCard } from '@nim-ui/components';

Basic Usage

Total Users

1,234

Code

<DataCard value="1,234" label="Total Users" />

With Trend Indicator

Display a trend alongside the value to show direction of change. The trendDirection prop controls the color of the trend text.

Revenue

$45,231

+12.5%

Open Issues

-8.2%

Uptime

99.9%

Code

<DataCard value="$45,231" label="Revenue" trend="+12.5%" trendDirection="up" />
<DataCard value="23" label="Open Issues" trend="-8.2%" trendDirection="down" />
<DataCard value="99.9%" label="Uptime" trend="0%" trendDirection="neutral" />

With Description

Add supplementary context below the value with the description prop.

Uptime

98.5%

+2.3%

Last 30 days

Code

<DataCard
  value="98.5%"
  label="Uptime"
  description="Last 30 days"
  trend="+2.3%"
  trendDirection="up"
/>

Props

Name	Type	Default	Description
`value*`	`string \| number`	-	The primary metric value to display
`label*`	`string`	-	Label describing the metric
`description`	`string`	-	Additional context shown below the value
`trend`	`string`	-	Trend value text, e.g. "+12.5%"
`trendDirection`	`'up' \| 'down' \| 'neutral'`	-	Direction of the trend, controls the trend text color
`className`	`string`	-	Additional CSS classes to apply

Usage Examples

Dashboard Metrics Row

function DashboardMetrics() {
  return (
    <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4">
      <DataCard
        value="$45,231"
        label="Total Revenue"
        trend="+12.5%"
        trendDirection="up"
        description="vs. last month"
      />
      <DataCard
        value="1,234"
        label="Active Users"
        trend="+8.1%"
        trendDirection="up"
        description="vs. last month"
      />
      <DataCard
        value="23"
        label="Open Tickets"
        trend="-15%"
        trendDirection="down"
        description="vs. last week"
      />
      <DataCard
        value="4.8"
        label="Avg Rating"
        trend="0%"
        trendDirection="neutral"
        description="No change"
      />
    </div>
  );
}

Dynamic Data Fetching

function RevenueCard() {
  const { data, isLoading } = useQuery({
    queryKey: ['revenue'],
    queryFn: fetchRevenue,
  });

  if (isLoading) return <div className="animate-pulse h-32 rounded-lg bg-neutral-200" />;

  return (
    <DataCard
      value={data.formatted}
      label="Monthly Revenue"
      trend={data.trendPercent}
      trendDirection={data.trendUp ? 'up' : 'down'}
      description={`vs. ${data.comparisonPeriod}`}
    />
  );
}

Stat - Lightweight stat display without card styling
Badge - Status indicator labels
DataTable - Tabular data display

On this page