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.
Active users
2,845
Playground
<ply-stat-card variant="classic" value="2,845" label="Active users" trend="+12.4%" color="primary" [delta]="-50">Stat Card</ply-stat-card>
Provide value and label as the minimum configuration.
Total Revenue
48,295
Active Users
1,842
<ply-stat-card value="48,295" label="Total Revenue"></ply-stat-card>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-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-stat-card-example',
imports: [
StatCardComponent
],
template: `...`
})
export class StatCardExampleComponent {}Install
npx ply-ui-cli add stat-card
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
23
Uptime
98.2%
<ply-stat-card value="$48,295" label="Revenue" icon="dollar-sign" color="primary"></ply-stat-card>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-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-stat-card-example',
imports: [
StatCardComponent
],
template: `...`
})
export class StatCardExampleComponent {}Install
npx ply-ui-cli add stat-card
Use trend and [trendUp] to show a directional indicator. Add caption for comparison context.
Revenue
$48,295
New Orders
284
Refunds
34
<ply-stat-card value="$48,295" label="Revenue" icon="line-chart" color="primary" trend="+12.5%" [trendUp]="true" caption="vs last month"> </ply-stat-card>
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-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-stat-card-example',
imports: [
StatCardComponent
],
template: `...`
})
export class StatCardExampleComponent {}Install
npx ply-ui-cli add stat-card
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
$248,910
vs $210K previous period
Orders
1,284
vs 1,190 previous period
Refunds
48
vs 52 previous period
Conversion
3.1%
vs 2.8% previous period
<ply-stat-card variant="metric" label="Net revenue" value="$248,910" caption="vs $210K previous period" [delta]="0.062" [series]="[18, 22, 19, 24, 28, 26, 31]" ></ply-stat-card>
revenueSeries = [18, 22, 19, 24, 28, 26, 31, 29, 34, 32, 38, 36];
TypeScript
import { Component } from '@angular/core';
// Install: npx ply-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-stat-card-example',
imports: [
StatCardComponent
],
template: `...`
})
export class StatCardExampleComponent {}Install
npx ply-ui-cli add stat-card
Run the following command to add this component to your project:
npx ply-ui-cli add stat-card
For AI agents
Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.
npx -y ply-ui-mcp
Ply provides standalone components. Import the exact elements you want to use into your component.
// Install: npx ply-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 | Member | Type | Default | Description |
|---|---|---|---|---|
ply-stat-card | class | string | '' | Extra host classes merged via `cn()`. |
ply-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. |
ply-stat-card | value | string | '' | The large metric value. |
ply-stat-card | label | string | '' | Label rendered above the value (classic) or as a micro uppercase header (metric). |
ply-stat-card | trend | string | undefined | undefined | Preformatted trend text for classic mode (e.g. `"+12.5%"`). |
ply-stat-card | trendUp | boolean | undefined | undefined | Classic mode: `true` = green up arrow, `false` = red down arrow. |
ply-stat-card | icon | string | undefined | undefined | Optional icon name for classic mode (tinted bubble). |
ply-stat-card | color | StatCardColor | 'primary' | Tint for the classic icon bubble. |
ply-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. |
ply-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. |
ply-stat-card | series | readonly number[] | [] | Metric mode: sparkline series. Empty/omitted hides the chart. |
Content