Gallery Metrics Bar

A compact metrics ribbon — a horizontal strip of { label, value } pairs with optional units and semantic trend tones. Built for image-gallery and web-perf teaching surfaces where space is tight and the values update live.

Preview

DOM18

Network14

Memory2MB

CLS0.04

LCP1.4s

Customize

Values

DOM nodes18

Network reqs14

Memory (MB)2

Display

show units

neutral tone

Installation

npx shadcn@latest add https://craftbits.dev/r/gallery-metrics-bar.json

Usage

import { GalleryMetricsBar } from "@craft-bits/core";
 
<GalleryMetricsBar
  metrics={[
    { id: "dom", label: "DOM", value: 18, trend: "good" },
    { id: "network", label: "Network", value: 14, trend: "good" },
    { id: "memory", label: "Memory", value: 1.8, unit: "MB", trend: "good" },
    { id: "cls", label: "CLS", value: "0.04", trend: "good" },
    { id: "lcp", label: "LCP", value: 1.4, unit: "s", trend: "good" },
  ]}
/>

Anatomy

Ribbon — a flex container with wrap. Packs tightly on wide viewports; spills onto a second line on narrow ones — no media queries.
Tile — a small column with a label on top and a tabular-num value below.
Trend tone — good / warn / bad map to cb-success / cb-warning / cb-error on the value. neutral (default) keeps the foreground tone.
Value transition — each value is keyed by itself, so the motion.span re-mounts on change and re-runs initial -> animate. Live counters swap smoothly without imperative motion-value plumbing.

Props

Prop	Type	Default	Description
`metrics`	`GalleryMetricsBarMetric[]`	required	Ordered metric entries.
`aria-label`	`string`	`'Metrics'`	Accessible label for the status region.
`className`	`string`	—	Merged onto the root via `cn()`.

GalleryMetricsBarMetric

Field	Type	Description
`id`	`string`	Stable identifier, used as React key.
`label`	`ReactNode`	Short label rendered above the value.
`value`	`number \| string`	Value to display; numbers render with tabular nums.
`unit`	`string`	Optional unit suffix appended to the value.
`trend`	`'good' \| 'warn' \| 'bad' \| 'neutral'`	Optional semantic rating.

Accessibility

The ribbon root is a <div role="status"> with aria-label and aria-live="polite" so assistive tech announces updates.
aria-atomic="false" scopes update announcements to the changing tile rather than the whole bar.
Reduced-motion users get a static ribbon — no enter animation, no value transition.

Credits

Extracted from: terminal-dreams (src/components/frontend-design/sdp-image-gallery/ui/MetricsBar.tsx). The original hard-coded five image-gallery perf metrics, tied visibility to a step gate, and computed trend thresholds inline. craft-bits generalises the surface to metrics[] = { id, label, value, unit?, trend? }, drops the step gate, and lifts the trend decision to the caller. Distinct from MetricsPanel (the larger dashboard primitive) and the news-feed MetricsBar.