Skip to content
Nim UI

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

Basic DataCard

Total Users

1,234
View 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.

DataCard with Trends

Revenue

$45,231

+12.5%

Open Issues

23

-8.2%

Uptime

99.9%

0%
View 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.

DataCard with Description

Uptime

98.5%

+2.3%

Last 30 days
View 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