Newsfeed Metrics Bar

A social-style counter ribbon — a horizontal strip of icon + value + label triples for engagement counters like likes / reposts / comments / views. Built for news-feed cards and post surfaces where counts update live as a user interacts.

Preview

1284likes

312reposts

86comments

24100views

Customize

Counters

likes1284

reposts312

comments86

Display

show icons

icon-only (hide label)

neutral tone

Installation

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

Usage

import { Heart, Repeat2, MessageCircle } from "lucide-react";
import { NewsfeedMetricsBar } from "@craft-bits/core";
 
<NewsfeedMetricsBar
  metrics={[
    { id: "likes", label: "likes", value: 1284, icon: <Heart />, trend: "up" },
    { id: "reposts", label: "reposts", value: 312, icon: <Repeat2 /> },
    { id: "comments", label: "comments", value: 86, icon: <MessageCircle /> },
  ]}
/>

Anatomy

Ribbon — a flex container with wrap. Packs tightly on wide cards; spills onto a second line on narrow ones — no media queries.
Counter — an inline row of icon -> value -> label, the order social UIs scan left-to-right.
Trend tone — up paints the value with cb-success, down with cb-error, flat with cb-fg-subtle. 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.
Icon-only mode — set iconOnly: true on a metric to hide the inline label while preserving it as the tile's aria-label for assistive tech.

Props

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

NewsfeedMetricsBarMetric

Field	Type	Description
`id`	`string`	Stable identifier, used as React key.
`label`	`ReactNode`	Inline label rendered next to the value.
`value`	`number \| string`	Value to display; numbers render with tabular nums.
`icon`	`ReactNode`	Optional leading icon, rendered before the value.
`trend`	`'up' \| 'down' \| 'flat' \| 'neutral'`	Optional direction-of-change rating.
`iconOnly`	`boolean`	When true, hide the label visually but keep it as `aria-label`.

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 announcements to the changing counter rather than the whole bar.
Leading icons are aria-hidden="true" — the visible label (or the tile's aria-label when iconOnly is set) carries the accessible name.
Reduced-motion users get a static ribbon — no enter animation, no value transition.

Credits

Extracted from: terminal-dreams (src/components/frontend-design/sdp-news-feed/ui/MetricsBar.tsx). The original hard-coded four news-feed perf metrics (domNodes, networkReqs, scrollFps, tti), tied visibility to a step gate, computed trend thresholds inline with bad/good booleans, and laid the counters out in a 4-column CSS grid. craft-bits generalises the surface to a social-shaped metrics[] = { id, label, value, icon?, trend?, iconOnly? }, drops the step gate, lifts the trend decision to the caller, and shifts the layout to an inline icon-leading row that matches how engagement ribbons read on real feeds. Distinct from GalleryMetricsBar (label-above-value tiles for perf dashboards) and MetricsPanel (the larger dashboard primitive).