Getting StartedComponentsDesign TokensThemingTheme SynthesizerFrameworksAccessibilityUtilitiesServer RenderingBrowser SupportContributingChangelog App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip
ARC UI ARC Radiant Components
v3.2 Docs Components Tokens Synthesizer
Getting StartedFrameworksServer Rendering Design TokensThemingTheme SynthesizerTypographyUtilities All ComponentsAccessibilityBrowser SupportChangelogContributingStats App ShellAspect GridAuth ShellCenterClusterContainerDashboard GridDockFloat BarInsetMasonryPage HeaderPage LayoutResizableResponsive SwitcherSectionSettings LayoutSplit PaneStatus BarStickyToolbar Anchor NavBottom NavBreadcrumbBreadcrumb MenuCommand BarDrawerFooterLinkMenubarNavigation MenuPage IndicatorPaginationRailScroll IndicatorScroll SpyScroll To TopSidebarSkip LinkSpeed DialStepper NavTabsTop BarTree View AccordionAspect RatioAvatarAvatar GroupCalloutCardCarouselCollapsibleColor SwatchCTA BannerDividerEmpty StateFeature CardIconImageImage CompareImage HotspotsInfinite ScrollLightboxMarqueeQR CodeScroll AreaSeparatorSkeletonSpinnerStackVideoVirtual List Activity HeatmapAnimated NumberBadgeChartClockComparisonCountdown TimerData GridData TableDescription ListDiffEvent CalendarGaugeJSON TreeKanbanKey ValueLevel MeterListMeterSparklineStatStepperTableTagTimelineUptimeValue CardWaveform BlockquoteCode BlockGradient TextHighlightKbdKeyboard MapMarkdownNumber FormatProseTerminalTextTime AgoTruncateTypewriter ButtonButton GroupCalendarCheckboxChipColor PickerComboboxCopy ButtonDate PickerDate Range PickerFieldsetFile UploadFormHotkeyIcon ButtonImage CropperInline EditInputInput GroupKnobLabelMasked InputMulti SelectNumber InputOTP InputPassword InputPin InputRadio GroupRange SliderRatingSearchSegmented ControlSelectSignature PadSliderSortable ListSwitch GroupTag InputTextareaTheme ToggleTime PickerToggleTransfer ListTree Select AlertAnnouncementBannerCommand PaletteConfirmConnection StatusContext MenuConversationDialogDropdown MenuGuided TourHover CardInline MessageLoading OverlayModalNotification PanelPopoverProgressProgress ToastSheetSnackbarSpotlightToastTooltip

Stat

Numeric statistic display with gradient value and label.

Components Stat
data static
<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, making numbers visually striking against dark backgrounds. A thin gradient rule sits between the value and its uppercase label, providing a subtle decorative separator. The value font-size uses `clamp(32px, 4.5vw, 48px)` to scale responsively between breakpoints, ensuring readability from mobile to desktop without manual 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, giving users an immediate sense of direction alongside the headline number. Stat is designed for landing-page metrics, dashboard KPI rows, and pricing comparison grids. Place multiple Stats side by side in a flex or grid container to create a metrics row. The exposed CSS parts — "stat", "value", "label", and "trend" — allow per-instance styling when you need to customize colors or sizes beyond the defaults.

Guidelines

When to use

  • Place Stats in a row of three or four to create a balanced metrics section
  • Use short, punchy values like "99.9%", "<50ms", or "24/7" for maximum impact
  • 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 lightweight 200 weight is intentional for the design aesthetic
  • Do not embed interactive elements inside the value or label props; they render as plain text spans

Features

  • 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
  • Lightweight font-weight 200 for an elegant numeric display
  • Center-aligned vertical layout with configurable padding via design tokens

Preview

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

value string ''
The stat value (e.g. "99%")
label string ''
Label below the value
trend 'up' | 'down' | 'neutral' ''
Shows a trend indicator arrow below the label.
change string ''
Text displayed next to the trend arrow, typically a percentage like '+12%' or '-3.5%'.

See Also
ARC UI

Components that glow. One Lit source, seven native targets.

Docs

Project

Arclight

© 2026 Arclight Digital, LLC. All rights reserved.

Documentation generated with AI assistance and reviewed by humans. Found an issue? Open a GitHub issue.

Privacy Policy