StatCard

StatCard is a metric tile with a label, a figure, and a semantic delta. The wash is a neutral gray; product-specific color fields stay in the app.

import { StatCard } from '@lobehub/ui/dashboard';

NPM Source Edit

Data Display

Default

Loading preview

APIs

StatCard properties

action

null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>

Control rendered on the label row, such as a menu.

delta

string

Change amount, colored by `direction`.

direction

'flat' | 'up' | 'down'

Defaults to "flat".

hint

string

Line under the figure.

labelRequired

ReactNode

mark

null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode> | LucideIcon | FC<any>

Corner glyph. Hidden from assistive tech so it does not repeat the label.

prominent

boolean

Overview scale: label, then a large figure, then the note.

Defaults to false.

valueRequired

ReactNode

wash

'gray'