Stats Bar

Overview

Renders a centered row of metric values separated by vertical dividers. Numeric values animate from 0 to their target using a count-up animation that activates when the component enters the viewport. String values are displayed as-is.

Usage

import { StatsBar } from '@leanicon/web-builder-library'

Default

With prefix & suffix

String values

String values are displayed immediately without count-up animation.

Slide-up animation

Fade animation

Scale animation

Dark mode

Props

MetricItem

icon takes a node, not an icon name. In the CMS the editor stores a kebab-case lucide name (shield-check) and the block adapter resolves it with resolveIcon() before it reaches this component — that keeps lucide's icon map out of the client bundle. Rendering it is guarded, so a metric without an icon is spaced exactly as it was before, and a bar may mix the two.

Icon size and position

Position is a prop on the bar, not on the metric — one setting for all of them, because icons in different places within one bar read as a mistake. Size is not a prop: the adapter bakes it into the icon's own className before the node reaches this component, since that is where resolveIcon() runs.

Both come from ./icon-layout.ts, a directive-free module the server adapter and this client component both import. In the CMS they are the stats-bar block's Icon position and Icon size fields.

AnimationConfig

Notes

• Count-up animation triggers once when 20% of the component is visible (uses IntersectionObserver via useInView).
• Count-up duration is 1.5 seconds.
• String value fields are displayed immediately without animation.
• Respects prefers-reduced-motion — animations are skipped for users who prefer reduced motion.
• Metrics are separated by a left border (md:border-l) from the second onward, so the dividers appear only once the bar is laid out in a row.
• Dark mode: pass colorScheme="dark" or place inside a .dark ancestor.