Infographic Bar

Composable continuous stat-card band. Lays out N stat-cards as a single infographic strip — outer corners rounded, inner corners square, hairline dividers, no full per-card borders. Theme-portable across bordered and borderless palettes.

Preview

A KPI row that reads as one continuous band — not four separate cards butting together. The band owns the frame, radius, and elevation; each stat-card sheds its own chrome.

$48,120

+12.4%vs last monthup vs last month

892

+3.1%up

3.2%

-0.4%down

4m 12s

0%flat

Highlighted cell

Set variant: "highlight" on any cell to tint it. Only the surface changes — the band's continuous frame and dividers stay intact.

$48,120

+12.4%up

312

+8.1%up

-3.0%down

Compact density

Pass size="sm" to tighten every cell for dense dashboards.

2,340

+8%up

412

+2%up

28%

-1%down

$12k

+5%up

Installation

npx visor add infographic-bar

This copies two files into your project:

components/ui/infographic-bar/infographic-bar.tsx — the component
components/ui/infographic-bar/infographic-bar.module.css — the styles

StatCard is installed automatically as a dependency.

Usage

import { InfographicBar } from '@/components/ui/infographic-bar/infographic-bar';

export default function Example() {
  return (
    <InfographicBar
      stats={[
        { label: 'Total Revenue', value: '$48,120', delta: { value: '+12.4%', direction: 'up', label: 'vs last month' } },
        { label: 'Active Users', value: '892', delta: { value: '+3.1%', direction: 'up' } },
        { label: 'Churn Rate', value: '3.2%', delta: { value: '-0.4%', direction: 'down' } },
      ]}
    />
  );
}

Theming

InfographicBar is theme-agnostic and reads correctly in both bordered and borderless palettes:

Outer frame uses --border-default. Borderless themes set this to transparent, so the band's frame drops away and it melts into the page.
Dividers use --hairline — the house soft-separator token, lighter than a full border. Override --infographic-bar-divider to retune them, including transparent for a fully seamless band.
Corners round via overflow: hidden on the band, so outer cells round and inner cells stay square for any number of cells.

API Reference

InfographicBarProps

Prop	Type	Default	Description
`stats`*	`InfographicBarStat[]`	—	Ordered stat cells, rendered left-to-right as a single continuous band. Each item is a subset of StatCardProps (label, value, delta, trend, trendPosition, footer, variant, valueAs) plus an optional id.
`stats[].label`*	`React.ReactNode`	—	Small uppercase label describing the metric.
`stats[].value`*	`React.ReactNode`	—	Prominent metric value rendered in a large display size.
`stats[].delta`	`StatCardDelta`	—	Change indicator with value, direction ("up" \| "down" \| "flat"), and optional context label.
`stats[].variant`	`'default' \| 'highlight'`	`'default'`	Per-cell visual emphasis. Highlight tints that cell’s surface; the band frame and dividers stay continuous.
`stats[].id`	`string`	—	Stable React key for the cell. Falls back to the array index when omitted.
`size`	`'sm' \| 'md'`	`'md'`	Dimensional density forwarded to every cell.
`className`	`string`	—	Additional CSS class names merged onto the band element.
`...props`	`React.HTMLAttributes<HTMLDivElement>`	—	All standard HTML attributes are forwarded to the band div.

The component also forwards all standard HTML attributes to the band <div>.

InfographicBarStat

Each entry in stats is a subset of StatCardProps: label, value, delta, trend, trendPosition, footer, variant, valueAs, plus an optional id used as the React key.

Accessibility

Each cell is a StatCard, which announces its delta direction (up, down, flat) to screen readers via visually-hidden text alongside the visible glyph — color is never the sole signal. The cells default to <article> landmarks, so the band exposes one landmark per metric.

Infographic Bar

On this page