Stat strip

Drop this above any admin/dashboard page. It’s just StatCards in a flex row, but the responsive wrap, the gap, and the equal flex distribution save you 20 lines every time you need it.

'use client';

import { StatCard, Stack } from '@helixui/core';

export interface Stat {
  label: string;
  value: string;
  delta?: string;
  description?: string;
  /** When the trend going down is good (latency, errors), flip this. */
  invertedTrend?: boolean;
}

export function StatStrip({ stats }: { stats: Stat[] }) {
  return (
    <Stack direction="row" gap={4} wrap>
      {stats.map((s) => (
        <div key={s.label} style={{ flex: '1 1 200px', minWidth: 200 }}>
          <StatCard {...s} />
        </div>
      ))}
    </Stack>
  );
}

Usage

<StatStrip
  stats={[
    { label: 'MRR',            value: '$24,810', delta: '+8.2%', description: 'vs last week' },
    { label: 'Active users',   value: '1,240',   delta: '+3.1%' },
    { label: 'Churn',          value: '2.4%',    delta: '-0.5pp', invertedTrend: true },
    { label: 'NPS',            value: '52',      delta: '+7' },
  ]}
/>

Design notes

• 4 tiles is the comfortable max. 5 starts crowding on a 1280px laptop.
• min-width: 200px keeps tiles legible on phones — they stack one per row when the viewport is narrower than 4×200px.
• invertedTrend flips the trend color so “latency went down” reads green instead of red. Use it for any metric where lower is better.