Photonix

StatWidget

A compact widget for displaying key performance indicators, metrics, and trends.

Preview

Total Revenue

$45,231.89

+20.1%
Usage
import { StatWidget } from '@photonix/ultimate';
import { TrendingUpOutline } from '@photonix/icons';

const CHART_DATA = [
    { value: 400 }, { value: 300 }, { value: 500 }, { value: 200 }, { value: 600 }, { value: 400 }, { value: 700 }
];

<StatWidget 
    title="Total Revenue" 
    value="$45,231.89" 
    trend="+20.1%" 
    trendType="positive"
    chartData={CHART_DATA}
    icon={<TrendingUpOutline style={{ color: 'var(--foreground-accent-green)' }} />}
/>

Component API

StatWidget

Prop
Type
Default
Description
title
string
-
The title of the widget
value
string | number
-
The main value to display
trend
string
-
Trend string (e.g., "+12.5%")
trendType
"positive" | "negative" | "neutral"
'neutral'
Type of trend to determine badge color
chartData
any[]
-
Optional chart data for sparkline
chartDataKey
string
'value'
Key for the value in chartData
chartColor
string
'var(--chart-1)'
Color for the sparkline
icon
React.ReactNode
-
Optional icon to display next to the title
loading
boolean
false
Loading state
appearance
WidgetAppearance
'outlined'
Widget appearance
padding
string | number
-
Widget padding (default: 16px)
className
string
-
Custom class name
style
React.CSSProperties
-
Custom style

Variants

Basic

Simple metric cards without trends or charts.

New Users

1,234

Bounce Rate

42.3%

Avg. Session

4m 32s

Basic
<SimpleGrid columns={{ base: 1, md: 3 }} gap="md">
  <StatWidget title="New Users" value="1,234" />
  <StatWidget title="Bounce Rate" value="42.3%" />
  <StatWidget title="Avg. Session" value="4m 32s" />
</SimpleGrid>

With Trend

Metrics with positive, negative, or neutral trends.

Active Subscriptions

842

+12%

Churn Rate

2.4%

-0.8%

Page Views

1.2M

+4%
With Trend
<SimpleGrid columns={{ base: 1, md: 3 }} gap="md">
  <StatWidget 
    title="Active Subscriptions" 
    value="842" 
    trend="+12%" 
    trendType="positive" 
    icon={<UserOutline />}
  />
  <StatWidget 
    title="Churn Rate" 
    value="2.4%" 
    trend="-0.8%" 
    trendType="negative" 
    icon={<TrendingDownOutline />}
  />
  <StatWidget 
    title="Page Views" 
    value="1.2M" 
    trend="+4%" 
    trendType="neutral" 
  />
</SimpleGrid>

With Chart

Metrics integrated with a sparkline to visualize data history.

Daily Sales

$12,420

+5.2%

Customer Rating

4.8

+0.2
With Chart
<SimpleGrid columns={{ base: 1, md: 2 }} gap="md">
  <StatWidget 
    title="Daily Sales" 
    value="$12,420" 
    trend="+5.2%" 
    trendType="positive"
    chartData={CHART_DATA}
    chartColor="var(--chart-2)"
    icon={<ShoppingCartOutline />}
  />
  <StatWidget 
    title="Customer Rating" 
    value="4.8" 
    trend="+0.2" 
    trendType="positive"
    chartData={CHART_DATA}
    chartColor="var(--chart-3)"
    icon={<StarOutline />}
  />
</SimpleGrid>

Loading State

Automatic skeleton loading state.

Loading State
<StatWidget loading title="Revenue" value="$0" chartData={CHART_DATA} />

On this page

Preview
Component API
Variants
Basic
With Trend
With Chart
Loading State
Photonix UI - React Components, Templates & Figma Design System