StatsCard

A 2nd-order composition of Card + StatGroup + Stat primitives. Pass an array of stat items with optional trend indicators and help text. Exported from the stat subpath.

Data Displaystatcarddashboardmetrickpitrend

Dashboard stats

import { StatsCard } from '@primstack/ui/stat'

<StatsCard
  stats={[
    { label: 'Revenue', value: '$12.4k', trend: 'increase', trendValue: '+12%' },
    { label: 'Users', value: '1,234', trend: 'increase', trendValue: '+8%' },
    { label: 'Churn', value: '2.1%', trend: 'decrease', trendValue: '-0.3%' },
  ]}
/>

With icon and trend

import { StatsCard } from '@primstack/ui'

<StatsCard title="Total Users" value="1,234" trend={{ value: 12, direction: 'up' }} icon="users" />

Related Components

Stat

Display a statistic with label, value, and trend.

data-displaystatmetric

Card

Composable container with header, content, and footer slots.

data-displaycontainersurface