Before And After Pairs

Stats67: Before And After Pairs

A results section stacking each measure on its own hairline row, moving a muted starting figure to an accented result across an arrow, with a soft closing panel that floats a live comparison card.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/stats67?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/stats67?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/stats67.tsx, the stats17 comparison piece it floats on the tile (installed to components/beste/piece/stats17.tsx), and the badge23 component it uses for the eyebrow.

Quick start

The installed file exports stats67Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.

import { Stats67, stats67Demo } from "@/components/beste/block/stats67";

export default function ResultsPage() {
  return <Stats67 {...stats67Demo} />;
}

Then replace the demo with your own props. Written out, a trimmed setup looks like this:

import { Stats17 } from "@/components/beste/piece/stats17";
import { Stats67 } from "@/components/beste/block/stats67";

export default function ResultsPage() {
  return (
    <Stats67
      badge={{ label: "Before and after" }}
      heading="The same practice, measured twice"
      description="Counted the month before they moved and the month after they settled."
      beforeLabel="Before"
      afterLabel="After"
      pairs={[
        {
          measure: "Time to first booking",
          before: "9 days",
          after: "4 hours",
          note: "Referral arriving to a confirmed appointment in the member's hand.",
        },
        {
          measure: "Unfilled cancellations per week",
          before: "14",
          after: "1",
          note: "Slots that went unused because nobody had time to ring round.",
        },
      ]}
      media={
        <Stats17
          title="Time to first booking"
          before={{ label: "Before", value: "9 days", caption: "across three systems" }}
          after={{ label: "After", value: "4 hours", caption: "on one workspace" }}
          footnote="Median across eleven practices."
        />
      }
      image={{ src: "/backdrops/blue.jpg", alt: "Soft blue gradient backdrop" }}
      method="Counted from the practice's own records, not from a survey."
    />
  );
}

Props

type Pair = {
  measure: string;
  before: string;
  after: string;
  note: string;
};

type TileImage = {
  src: string;
  alt: string;
};

Behavior notes

• note is rendered twice with opposite visibility: once under the measure with lg:hidden, and once in the third column with hidden lg:block. That is how the row reads as a sentence on mobile and as a table on desktop without duplicating in the output.
• The direction of improvement is shown by muting the before figure and leaving the after in full contrast, plus the accent on afterLabel. Nothing is coloured green or red, since a lower number is better in half these rows.
• Figures use tabular-nums, so a column mixing "9 days" and "14" still aligns.
• The arrow is aria-hidden, and the before and after labels carry the meaning in text.
• method is a required part of the design rather than decoration: the closing panel exists so a results section is never published without saying how it was counted.
• The closing panel is bg-muted with a bg-background tile inside it, inverting the usual relationship so the tile reads as raised.
• Rows carry border-t with no closing rule, so the list flows into the closing panel.