Stat
Numeric statistic display with gradient value and label.
<arc-stat>Overview
Stat renders a single key metric as a vertically stacked, center-aligned block. The value is displayed in a large, lightweight font (weight 200) with a blue-to-violet gradient fill and a dual-layer drop-shadow glow, which makes numbers stand out against dark backgrounds. A thin gradient rule sits between the value and its uppercase label.
The value font-size uses clamp(32px, 4.5vw, 48px) to scale responsively between breakpoints, so it stays readable from mobile to desktop without media queries. The label uses the Tomorrow accent font at a small uppercase size with wide letter-spacing, following the system's standard labeling pattern.
Stat also supports an optional trend indicator via the trend and change props. Setting trend to "up", "down", or "neutral" renders a colored arrow below the label, and the change prop displays accompanying text (typically a percentage like "+12%"). Up trends render in green, down trends in red, and neutral in muted grey, so direction is clear alongside the headline number.
Stat fits landing-page metrics, dashboard KPI rows, and pricing comparison grids. Place several Stats side by side in a flex or grid container to make a metrics row. The exposed CSS parts ("stat", "value", "label", and "trend") allow per-instance styling of colors or sizes.
Guidelines
When to use
- Place Stats in a row of three or four for a metrics section
- Use short values like "99.9%", "<50ms", or "24/7"
- Keep labels to one or two words: they are designed for terse descriptions
- Pair with arc-section or a flex container to create structured stat rows
- Use the ::part(value) selector to apply custom gradients for branded metric colors
When not to use
- Do not use Stat for long text content: it is optimized for short numeric values
- Do not place a single Stat in isolation; they work best in groups that invite comparison
- Do not override the font-weight to bold: the light 200 weight is part of the design
- Do not embed interactive elements inside the value or label props; they render as plain text spans
Features
- `size` (sm, md, lg) and `plain` for a quiet stat in a dense strip of vitals
- Gradient-clipped value text with blue-to-violet fill and dual drop-shadow glow
- Responsive font-size using clamp() that scales from 32px to 48px
- Decorative gradient rule separator between value and label
- Uppercase Tomorrow-font label with wide letter-spacing
- Four exposed CSS parts (stat, value, label, trend) for external style overrides
- Optional trend indicator (up/down/neutral arrow with change text) for at-a-glance direction
- Light font weight (200) for the numeric display
- Center-aligned vertical layout with configurable padding via design tokens
Preview
99.9%
Uptime
+12%
<50ms
Latency
-8%
24/7
Support
1,204
Sessions
Usage
<arc-stat value="99.9%" label="Uptime"></arc-stat>
<arc-stat value="<50ms" label="Response Time"></arc-stat>
<arc-stat value="24/7" label="Support"></arc-stat>import { Stat } from '@arclux/arc-ui-react';
export default function Example() {
return (
<>
<Stat value="99.9%" label="Uptime" />
<Stat value="<50ms" label="Response Time" />
</>
);
}<script setup>
import { Stat } from '@arclux/arc-ui-vue';
</script>
<template>
<Stat value="99.9%" label="Uptime" />
<Stat value="<50ms" label="Response Time"></Stat>
<Stat value="24/7" label="Support" />
</template><script>
import { Stat } from '@arclux/arc-ui-svelte';
</script>
<Stat value="99.9%" label="Uptime" />
<Stat value="<50ms" label="Response Time"></Stat>
<Stat value="24/7" label="Support" />import { Component } from '@angular/core';
import { Stat } from '@arclux/arc-ui-angular';
@Component({
imports: [Stat],
template: `
<arc-stat value="99.9%" label="Uptime"></arc-stat>
<arc-stat value="<50ms" label="Response Time"></arc-stat>
<arc-stat value="24/7" label="Support"></arc-stat>
`,
})
export class MyComponent {}import { Stat } from '@arclux/arc-ui-solid';
export default function Example() {
return (
<>
<Stat value="99.9%" label="Uptime" />
<Stat value="<50ms" label="Response Time"></Stat>
<Stat value="24/7" label="Support" />
</>
);
}import { Stat } from '@arclux/arc-ui-preact';
export default function Example() {
return (
<>
<Stat value="99.9%" label="Uptime" />
<Stat value="<50ms" label="Response Time"></Stat>
<Stat value="24/7" label="Support" />
</>
);
}<!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-stat — requires stat.css + base.css (or arc-ui.css) -->
<div class="arc-stat">
<div class="stat">
<span class="stat__value">Value</span>
<span class="stat__rule"></span>
<span class="stat__label">Label</span>
</div>
</div><!-- Auto-generated by @arclux/prism — do not edit manually -->
<!-- arc-stat — self-contained, no external CSS needed -->
<div class="arc-stat" style="display: block">
<div style="display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 24px 16px">
<span style="font-size: clamp(32px, 4.5vw, 48px); font-weight: 200; letter-spacing: -1px; line-height: 1; background: linear-gradient(90deg, rgb(77, 126, 247), rgb(139, 92, 246)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; filter: drop-shadow(0 0 16px rgba(77, 126, 247,0.3))
drop-shadow(0 0 40px rgba(139, 92, 246,0.12))">Value</span>
<span style="width: 24px; height: 1px; background: linear-gradient(90deg, transparent, rgb(77, 126, 247), transparent); opacity: 0.4"></span>
<span style="font-family: 'Tomorrow', system-ui, sans-serif; font-weight: 600; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: rgb(124, 124, 137)">Label</span>
</div>
</div>API
valuestring''- The stat value (e.g. "99%")
labelstring''- Label below the value
trend'' | 'up' | 'down' | 'neutral'''- Shows a trend indicator arrow below the label. Empty (the default) shows none; an unrecognised value falls back to empty rather than rendering an uncoloured dash that no
:host([trend=...])rule matches. changestring''- Text displayed next to the trend arrow, typically a percentage like '+12%' or '-3.5%'.
size'sm' | 'md' | 'lg''md'- Scale of the whole stat.
mdis the display size;smis compact, for a strip of vitals beside other content;lgis for a hero figure. plainbooleanfalse- Draws the value in the text colour, without the accent gradient, glow and rule, so a stat can sit in a dense layout without competing with it.
See Also
- Animated NumberCount-up/down number animation with formatting options.
- Value CardHorizontal card with icon and text, for values or features lists.
- BadgeCompact pill-shaped label for status indicators, category tags, and notification counts. Seven color variants encode meaning across dashboards, tables, and card layouts.