@styloviz/stat-card

KPI metric cards with sparklines, trend chips and four layout variants.

Part of the Styloviz UI Kit — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, OnPush, strongly typed, dark-mode ready.

Installation

npm install @styloviz/stat-card

Requires @angular/core and @angular/common >= 21. Self-contained — no other Styloviz packages required. Prefer everything at once? @styloviz/all installs the whole free tier in one command.

Usage

import { SvStatCardComponent } from '@styloviz/stat-card';

@Component({
  standalone: true,
  imports: [SvStatCardComponent],
  template: `
    <sv-stat-card title="Revenue" [value]="48200" prefix="$" [trendPercent]="12.5" />
  `,
})
export class DemoComponent {}

Inputs

| Input | Type | Default | Description | | --- | --- | --- | --- | | title | string | '' | Card title / metric label. | | value | string \| number | '' | Primary metric value — string or number, displayed as-is or formatted. | | prefix | string | '' | Optional prefix rendered before the value (e.g. "$", "€"). | | suffix | string | '' | Optional suffix rendered after the value (e.g. "K", "%", "ms"). | | description | string | '' | Short helper text beneath the title (e.g. "Last 30 days"). | | trend | StatCardTrend | 'neutral' | Direction of change. | | trendValue | number \| null | null | Absolute delta value shown alongside the trend icon. | | trendPercent | number \| null | null | Percentage change shown in the trend chip. | | trendLabel | string | '' | Comparison context label (e.g. "vs last month"). | | variant | StatCardVariant | 'default' | Color variant — drives icon background, accent line and trend colors. | | layout | StatCardLayout | 'default' | Card layout mode. | | iconPath | string | '' | SVG path d attribute for the icon. Leave empty to render no icon. | | iconViewBox | string | '0 0 24 24' | SVG viewBox for the icon. | | sparkline | SparkPoint[] | [] | Array of data points for the inline sparkline. Values should be on a consistent numeric scale; the component normalises them internally. Empty array hides the sparkline. | | loading | boolean | false | Show skeleton loading shimmer instead of content. | | linkLabel | string | '' | Label for the bottom "view more" link. Empty string hides the link. | | customClass | string | '' | Additional CSS classes merged on the root card element. |

Outputs

| Output | Type | Description | | --- | --- | --- | | cardClick | void | Emitted when the card body is clicked (the full card is interactive). | | linkClick | void | Emitted when the "view more" link is clicked. |

Documentation

Full API reference and live demos: https://styloviz.dev/docs/stat-card

License

MIT