Stat

Import

import { Stat } from '@delightstack/components';

Basic Usage

0

Total Users

Restart

View code

<Stat value={1234} label="Total Users" />

Examples

With Change Indicator

Positive changes show a green up-arrow, negative changes show a red down-arrow.

$ 0

Revenue

+12.5%

Restart

View code

<Stat
  value="$12,450"
  label="Revenue"
  change={12.5}
  change_label="vs last month"
/>

With Icon

Pass any Svelte component as the icon prop.

<script>
  import { Stat } from '@delightstack/components';
  import UsersIcon from '~icons/mdi/account-group';
</script>

<Stat
  value={1234}
  label="Total Users"
  icon={UsersIcon}
  change={15}
  change_label="this week"
/>

Size Variants

Four sizes are available for different contexts.

0

Tasks

0

Tasks

0

Tasks

0

Tasks

Restart

View code

<Stat value={42} label="Tasks" size="0" />
<Stat value={42} label="Tasks" size="1" />
<Stat value={42} label="Tasks" size="2" />
<Stat value={42} label="Tasks" size="3" />

Horizontal Layout

0.0 %

Uptime

Restart

View code

<Stat horizontal value="99.9%" label="Uptime" />

Override Trend Direction

When a decrease is positive (e.g., bug count going down), override the trend color.

0

Open Bugs

-15%

Restart

View code

<Stat
  value={23}
  label="Open Bugs"
  change={-15}
  trend="up"
  change_label="fewer than last week"
/>

Skeleton Loading

Show loaded

View code

<Stat skeleton={loading} value={2451} label="Total Users" size="2" />

Props

Prop	Type	Default	Description
value	string | number	required	Main statistic to display
label	string	-	Descriptive label
icon	Component	-	Leading icon component
change	number	-	Percentage change from previous period
change_label	string	-	Description for the change (e.g., “vs last month”)
trend	'up' | 'down' | 'neutral'	auto	Override trend direction (auto-detected from change)
size	'0' | '1' | '2' | '3'	'1'	Component size
horizontal	boolean	false	Horizontal layout instead of vertical
animated	boolean	true	Animate numeric values via the Counter component
skeleton	boolean	false	Show loading skeleton
id	string	auto	Element ID
class	string	''	Additional CSS classes

Size Reference

Size	Value Font	Label Font	Use Case
'0'	20px	11px	Dense dashboards
'1'	28px	13px	Cards, summaries
'2'	40px	15px	Hero stats
'3'	56px	17px	Landing pages

Accessibility

• The stat value uses aria-live="polite" so screen readers announce value changes
• Change indicator includes an aria-label with direction and value (e.g., “increased by 12.5 percent, vs last month”)
• Trend direction is communicated via text, not just color
• The arrow icon is aria-hidden="true" since the text conveys the information
• Respects prefers-reduced-motion for skeleton shimmer animations