Stat Card

A dashboard metric card that displays a prominent value, descriptive label, optional trend, and icon — or, with variant="metric", a Motif-style KPI tile with delta pill, sparkline, and caption.

free

Basic Stat Card

Provide value and label as the minimum configuration.

Total Revenue

48,295

Active Users

1,842

HTML

With Icon and Color

Add icon and color to show a colored icon badge. Supported colors: primary, success, danger, warning, accent.

Revenue

$48,295

Active Users

1,842

Open Issues

Uptime

98.2%

HTML

With Trend Indicator

Use trend and [trendUp] to show a directional indicator. Add caption for comparison context.

Revenue

$48,295

+12.5% vs last month

New Orders

284

+8.3% vs last week

Refunds

-3.1% vs last month

HTML

Metric / sparkline

Set variant="metric" for the Motif Admin KPI layout: uppercase label, delta pill from a ratio ([delta]="0.062" → +6.2%), inline sparkline from [series], and a footer caption. No Pro chart dependency — the sparkline is drawn in the card.

Net revenue

+6.2%

$248,910

vs $210K previous period

Orders

+7.9%

1,284

vs 1,190 previous period

Refunds

−7.7%

vs 52 previous period

Conversion

+10.7%

3.1%

vs 2.8% previous period

HTML

TypeScript

Installation

Run the following command to add this component to your project:

bash

npx base-ui-cli add stat-card

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Base UI MCP server.

bash

npx -y base-ui-mcp

Base UI provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx base-ui-cli add stat-card
// Paths are relative to aliases.components (default: src/app/components)
import { StatCardComponent } from './stat-card/stat-card.component';

@Component({
  selector: 'app-your-component',
  imports: [
    StatCardComponent
  ],
  template: `...`
})
export class YourComponent {}

API for stat-card — generated from JSDoc in the library source.

API reference for stat-card
API	Member	Type	Default	Description
`base-stat-card`	`class`	`string`	`''`	Extra host classes merged via `cn()`.
`base-stat-card`	`variant`	`StatCardVariant`	`'classic'`	Layout mode. `classic` is the icon-left tile; `metric` is the Motif-style vertical stack with delta pill and sparkline.
`base-stat-card`	`value`	`string`	`''`	The large metric value.
`base-stat-card`	`label`	`string`	`''`	Label rendered above the value (classic) or as a micro uppercase header (metric).
`base-stat-card`	`trend`	`string \| undefined`	`undefined`	Preformatted trend text for classic mode (e.g. `"+12.5%"`).
`base-stat-card`	`trendUp`	`boolean \| undefined`	`undefined`	Classic mode: `true` = green up arrow, `false` = red down arrow.
`base-stat-card`	`icon`	`string \| undefined`	`undefined`	Optional icon name for classic mode (tinted bubble).
`base-stat-card`	`color`	`StatCardColor`	`'primary'`	Tint for the classic icon bubble.
`base-stat-card`	`caption`	`string \| undefined`	`undefined`	Comparison caption. Classic: shown beside the trend when `trend` is set. Metric: always shown under the sparkline when non-empty.
`base-stat-card`	`delta`	`number \| undefined`	`undefined`	Metric mode: period-over-period change as a ratio (`0.062` → `+6.2%`). Drives the delta pill and sparkline stroke color.
`base-stat-card`	`series`	`readonly number[]`	`[]`	Metric mode: sparkline series. Empty/omitted hides the chart.