StatsCard

Present a formatted metric, its change and supporting context.

Category: Layout and content
Import: @neural-ui/core/stats-card
Selector: neu-stats-card

import { NeuStatsCardComponent } from '@neural-ui/core/stats-card';

Usage

Provide title and the already formatted value. change is display text, not a computed percentage. trend adds an up, down or neutral indicator. label adds context; projected content appears in the footer. icon resolves an application icon. Use explicit wording to explain whether a rising or falling metric is desirable.

Examples

Try the interaction and open Code for the implementation. Reset restores the initial state.

1,248

4.2%

Try and configure

Change the options and inspect the preview and generated template. Code contains the full executable source.

Live preview

1,248

Title

Formatted value

Change label

Supporting text

Demo custom icon (check)

Generated template: reflects the options above. Open Code for the complete imports and state.

<neu-stats-card
  title="Completed orders"
  value="1,248"
  change="+12%"
  trend="up"
  label="Compared with last month"
/>

Data and content

The application formats values and calculates changes. StatsCard has no Outputs, models or number-formatting API. Buttons in projected content handle their own events.

Accessibility and keyboard

Give every metric a visible title and explain its comparison period. Trend icons are decorative; change text and context communicate the result. The card itself is not a button. Project a real link or button for details.

Key	Action
`—`	Give every metric a visible title and explain its comparison period. Trend icons are decorative; change text and context communicate the result. The card itself is not a button. Project a real link or button for details.

API

Inputs and Outputs are extracted from the pinned package. Named types link to their definitions; Templates list only supported projection areas.

Inputs

Configure the component with [property]="value". Your application supplies these values; the component does not replace the state you pass in.

Name	Type	Default	Template binding	Description
`change`	`string`	`''`	`[change]`	Already formatted comparison text; no calculation is performed.
`icon`	`string \| null`	`null`	`[icon]`	Optional icon key resolved by the application.
`label`	`string`	`''`	`[label]`	Supporting context, such as the comparison period.
`title`	`string`	`''`	`[title]`	Visible metric name.
`trend`	`NeuStatsTrend`	`'neutral'`	`[trend]`	up, down or neutral direction; explain the meaning with text.
`value`	`string`	`''`	`[value]`	Already formatted value displayed as text.

Templates

ng-content projects content into the component. TemplateRef inputs receive a template; ng-template directives identify templates with a typed context. A directive shared by an entrypoint is not necessarily a slot of this component.

Name	Mechanism	Contract
`*` Metric footer View example	Content projection Add supporting content or a button for details.	`<ng-content />` Context used: `—`

Each example demonstrates a different template. Switch between Demo and Code to inspect its implementation, imports and state.

Metric footer actions

*

248

Public Types

Open a type to inspect its definition and interface fields.

NeuStatsTrendTypeScript

Styles and tokens

Use the public component Inputs and Core surface, text, spacing and semantic color tokens. Keep content responsive and verify both themes.

Specific tokens

This component uses shared theme tokens rather than dedicated component hooks.

Shared tokens used

Override these on a local wrapper to affect this example. An override on :root affects other components that use the same token.

Token	Purpose here	Other impact	Default / fallback
`--neu-border`	Normal control and cell borders	Shared by other Core consumers; scope the override.	`rgba(15, 23, 42, 0.08)`
`--neu-error-bg`	Background of invalid or danger states	Shared by other Core consumers; scope the override.	`#fee2e2`
`--neu-error-text`	Error text and danger outline/ghost Button text in both themes	Shared by other Core consumers; scope the override.	`#991b1b`
`--neu-primary`	Brand color for active controls and emphasis	Shared by other Core consumers; scope the override.	`#007aff`
`--neu-primary-50`	Subtle brand surface for hover and focus states	Shared by other Core consumers; scope the override.	`#eff6ff`
`--neu-radius`	Control corner radius	Shared by other Core consumers; scope the override.	`8px`
`--neu-surface`	Main field, header or control surface	Shared by other Core consumers; scope the override.	`#ffffff`
`--neu-surface-2`	Secondary surfaces and alternating rows	Shared by other Core consumers; scope the override.	`#f1f5f9`