Skip to content
Neat LabsJoin the waitlist

Stat row

Three figures with labels in a ruled row, plus a source line underneath. Stacks on phones.

id stat-row · revision fe6845b34242 · catalogue 0.1.0

Preview

What this style doesn't cover

  • --nl-section-y: Signal has no section spacing. The package uses 96px.
  • dark mode: Signal has no dark mode. The package uses Light values in every mode.
  • Arial Black isn't loaded by this package. It shows only where the font is installed; elsewhere the stack falls back to "Helvetica Neue", Arial, sans-serif.
  • Helvetica Neue isn't loaded by this package. It shows only where the font is installed; elsewhere the stack falls back to Arial, sans-serif.
Desktop, 1280px, lightOpen alone
Phone, 390px, lightOpen alone

Signal has no dark mode, so only light is shown.

Copy it

These two files are exactly what the previews above render. The MCP tool get_component returns the same files.

  1. Save StatRow.tsx with your components and styles/neat-signal.css with your styles.
  2. Import styles/neat-signal.css once, after @import "tailwindcss" in your global stylesheet.
  3. Make sure Tailwind scans the folder that holds the component.
components/StatRow.tsx
export interface Stat {
  value: string;
  label: string;
}

export interface StatRowProps {
  label?: string;
  stats?: Stat[];
}

/**
 * A row of three or four figures with labels, separated by rules. Values are
 * strings so you control the formatting. Use real numbers only.
 */
export function StatRow({
  label = "Example figures. Replace them with your own measured numbers.",
  stats = [
    { value: "42", label: "Release notes drafted last month" },
    { value: "3 min", label: "Median time to approve a draft" },
    { value: "12", label: "Teams publishing weekly" },
  ],
}: StatRowProps) {
  return (
    <section className="bg-[color:var(--nl-canvas)] px-6 py-[var(--nl-section-y)] font-[family-name:var(--nl-font-sans)] text-[color:var(--nl-ink)]">
      <div className="mx-auto max-w-6xl">
        <dl className="grid gap-8 border-y border-[color:var(--nl-line)] py-10 sm:grid-cols-3 sm:gap-0 sm:divide-x sm:divide-[color:var(--nl-line)]">
          {stats.map((stat) => (
            <div key={stat.label} className="flex flex-col-reverse gap-2 sm:px-8 sm:first:pl-0 sm:last:pr-0">
              <dt className="text-sm text-[color:var(--nl-muted)]">{stat.label}</dt>
              <dd className="font-[family-name:var(--nl-font-display)] text-4xl font-semibold tabular-nums sm:text-5xl">{stat.value}</dd>
            </div>
          ))}
        </dl>
        <p className="mt-4 text-xs text-[color:var(--nl-muted)]">{label}</p>
      </div>
    </section>
  );
}
styles/neat-signal.css
/* Neat Labs theme "signal" (revision 5aa0ba0b4008) for stat-row (revision fe6845b34242), catalogue 0.1.0. */
:root {
  --nl-canvas: #FFFFFF;
  --nl-ink: #0A0A0A;
  --nl-muted: #3F3F3F;
  --nl-line: #0A0A0A;
  --nl-font-display: "Arial Black", "Helvetica Neue", Arial, sans-serif;
  --nl-font-sans: "Helvetica Neue", Arial, sans-serif;
  --nl-section-y: 96px; /* fallback: not part of the style */
}
MCP tool call
{
  "name": "get_component",
  "arguments": {
    "id": "stat-row",
    "style": "signal"
  }
}

In every style