Stat

Display statistics with labels, values, and trends.

import { Stat } from "@ninna-ui/data-display"

pnpm add @ninna-ui/data-display

Requires @ninna-ui/core (auto-installed) + CSS setup.

View source

Usage

Import and use the Stat component in your application.

import { Stat } from "@ninna-ui/data-display";

export default function Example() {
  return (
    <Stat>
      <Stat.Label>Revenue</Stat.Label>
      <Stat.Value>$45,231</Stat.Value>
      <Stat.Trend direction="up">+20.1%</Stat.Trend>
    </Stat>
  );
}

Basic

A basic stat with label, value, and trend.

Total Revenue: $45,231

Sizes

Stat value comes in sm, md, and lg sizes.

Size: sm: $12,345

Size: md: $12,345

Size: lg: $12,345

Trends

Show trend direction with automatic color coding.

Revenue: $45,231

Expenses: $8,120

Bounce Rate: 32%

API Reference

Complete list of props for the Stat component and its sub-components.

Stat.Value

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Size of the value text
`className`	`string`	-	Additional CSS classes

Stat.Trend

Prop	Type	Default	Description
`direction*`	`'up' \| 'down' \| 'neutral'`	-	Trend direction
`positiveIsGood`	`boolean`	`true`	Whether up direction uses positive (green) color
`className`	`string`	-	Additional CSS classes

Accessibility

Stat uses semantic HTML for label-value association
Trend direction is communicated both visually and through accessible text
Color is not the only indicator — arrow icons convey direction