Stat

A statistics display component showing a label, value, and optional trend indicator. Supports positive/negative/neutral trend coloring.

Data Displaystatmetricnumberkpidashboard

Basic

import { Stat, StatLabel, StatValue, StatHelpText, StatArrow } from '@primstack/ui/stat'

<Stat>
  <StatLabel>Revenue</StatLabel>
  <StatValue>$45,231</StatValue>
  <StatHelpText>
    <StatArrow type="increase">12%</StatArrow>
  </StatHelpText>
</Stat>

With trend

import { Stat } from '@primstack/ui'

<Stat label="Revenue" value="$12,450" trend={{ value: 12.5, direction: 'up' }} />
<Stat label="Churn" value="2.1%" trend={{ value: 0.3, direction: 'down' }} />

Related Components

Card

Composable container with header, content, and footer slots.

data-displaycontainersurface

Progress

Horizontal progress bar with percentage display.

feedbackloadingbar