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

  • Inter isn't loaded by this package. It shows only where the font is installed; elsewhere the stack falls back to ui-sans-serif, system-ui, sans-serif.
Desktop, 1280px, lightOpen alone
Phone, 390px, lightOpen alone
Desktop, 1280px, darkOpen alone
Phone, 390px, darkOpen alone

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-harbor.css with your styles.
  2. Import styles/neat-harbor.css once, after @import "tailwindcss" in your global stylesheet.
  3. Make sure Tailwind scans the folder that holds the component.
  4. For dark mode, set data-theme="dark" on the <html> element.
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-harbor.css
/* Neat Labs theme "harbor" (revision 99a4282efae6) for stat-row (revision fe6845b34242), catalogue 0.1.0. */
:root {
  --nl-canvas: #F7F9FC;
  --nl-ink: #0E1726;
  --nl-muted: #4A5568;
  --nl-line: #D8DEE8;
  --nl-font-display: "Inter", ui-sans-serif, system-ui, sans-serif;
  --nl-font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
  --nl-section-y: 112px;
}

[data-theme="dark"] {
  --nl-canvas: #0B1220;
  --nl-ink: #E6EDF7;
  --nl-muted: #9AA8BD;
  --nl-line: #24324A;
}
MCP tool call
{
  "name": "get_component",
  "arguments": {
    "id": "stat-row",
    "style": "harbor"
  }
}

In every style