Photonix

StatWidget

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

Preview

New Users

1,234

Bounce Rate

42.3%

Avg. Session

4m 32s

Usage
"use client";

import { SimpleGrid, StatWidget } from '@photonix/ultimate';

export default function StatWidgetBasicExample() {
    return (
        <SimpleGrid columns={{ base: 1, md: 3 }} gap="md" w="100%">
            <StatWidget title="New Users" value="1,234" />
            <StatWidget title="Bounce Rate" value="42.3%" />
            <StatWidget title="Avg. Session" value="4m 32s" />
        </SimpleGrid>
    );
}

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
"use client";

import { SimpleGrid, StatWidget } from '@photonix/ultimate';

export default function StatWidgetBasicExample() {
    return (
        <SimpleGrid columns={{ base: 1, md: 3 }} gap="md" w="100%">
            <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
"use client";

import { SimpleGrid, StatWidget } from '@photonix/ultimate';
import { ArrowDownOutline, UserOutline } from '@photonix/icons';

export default function StatWidgetWithTrendExample() {
    return (
        <SimpleGrid columns={{ base: 1, md: 3 }} gap="md" w="100%">
            <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={<ArrowDownOutline />} />
            <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
"use client";

import { SimpleGrid, StatWidget } from '@photonix/ultimate';
import { AppsOutline, StarOutline } from '@photonix/icons';

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

export default function StatWidgetWithChartExample() {
    return (
        <SimpleGrid columns={{ base: 1, md: 2 }} gap="md" w="100%">
            <StatWidget title="Daily Sales" value="$12,420" trend="+5.2%" trendType="positive" chartData={chartData} chartColor="var(--chart-2)" icon={<AppsOutline />} />
            <StatWidget title="Customer Rating" value="4.8" trend="+0.2" trendType="positive" chartData={chartData} chartColor="var(--chart-3)" icon={<StarOutline />} />
        </SimpleGrid>
    );
}

Loading State

Automatic skeleton loading state.

Loading State
"use client";

import { StatWidget } from '@photonix/ultimate';

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

export default function StatWidgetLoadingExample() {
    return <StatWidget loading title="Revenue" value="$0" chartData={chartData} />;
}

On this page

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