Stat

A flexible component for displaying key metrics and statistics with support for trends, indicators, and descriptions.

Radix UI Base UI

Installation

pnpm dlx shadcn@latest add @diceui/stat

Layout

Import the parts, and compose them together.

import {
  Stat,
  StatLabel,
  StatValue,
  StatIndicator,
  StatTrend,
  StatDescription,
  StatSeparator,
} from "@/components/ui/stat";
 
return (
  <Stat>
    <StatLabel>Total Revenue</StatLabel>
    <StatIndicator variant="icon" color="success">
      <DollarSign />
    </StatIndicator>
    <StatValue>$45,231</StatValue>
    <StatTrend trend="up">
      <ArrowUp />
      +20.1% from last month
    </StatTrend>
    <StatSeparator />
    <StatDescription>
      Total revenue generated in the current billing period
    </StatDescription>
  </Stat>
);

Examples

Variants

Explore different indicator variants and color themes.

Layout Options

Combine different stat components to create rich statistical displays.

API Reference

Stat

The main container component that provides a card-style layout for displaying statistics.

Prop

Type

StatLabel

A label component for the statistic title or category.

Prop

Type

StatIndicator

A visual indicator component that can display icons, badges, or action buttons with various color themes.

Prop

Type

Data Attribute	Value
`[data-variant]`	`"default" \| "icon" \| "badge" \| "action"`
`[data-color]`	`"default" \| "success" \| "info" \| "warning" \| "error"`

StatValue

Displays the primary statistic value with emphasized typography.

Prop

Type

StatTrend

Displays trend information with directional styling (up, down, or neutral).

Prop

Type

Data Attribute	Value
`[data-trend]`	`"up" \| "down" \| "neutral"`

StatSeparator

A horizontal separator for dividing content within the stat card.

Prop

Type

StatDescription

Additional descriptive text for providing context about the stat.

Stack

A component that displays items in a stacked layout with hover expansion effects, similar to Sonner toast stacking.

Status

A flexible status indicator component with animated ping effect and color variants for displaying system states, user presence, and service health.

On this page

StatDescription