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

Every token this component reads is set by the style, and every font is loaded or a system font.

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-paper.css with your styles.
  2. Import styles/neat-paper.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.
  5. Add <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,[email protected],600&display=swap"> to the document head.
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-paper.css
/* Neat Labs theme "paper" (revision 9e029aa69c45) for stat-row (revision fe6845b34242), catalogue 0.1.0. */
:root {
  --nl-canvas: #F5F1E8;
  --nl-ink: #1F1B16;
  --nl-muted: #5E554A;
  --nl-line: #D9D0C1;
  --nl-font-display: "Fraunces", ui-serif, Georgia, serif;
  --nl-font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --nl-section-y: 96px;
}

[data-theme="dark"] {
  --nl-canvas: #16130F;
  --nl-ink: #F2ECE1;
  --nl-muted: #B3A999;
  --nl-line: #3A342C;
}
MCP tool call
{
  "name": "get_component",
  "arguments": {
    "id": "stat-row",
    "style": "paper"
  }
}

In every style