Quote-Led Provenance HeroPRO

Hero167: Quote-Led Provenance Hero

A hero that gives the display heading over to a customer sentence, credits the speaker beneath it, and evidences the quote with a hairline provenance table before the product line, actions and a tile floating the figure behind the claim.

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/hero167?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/hero167.tsx, the stats16 trend piece it floats on the tile (installed to components/beste/piece/stats16.tsx), and the badge23 and button21 components it uses for the eyebrow and the actions.

Quick start

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

import { Hero167, hero167Demo } from "@/components/beste/block/hero167";

export default function Page() {
  return <Hero167 {...hero167Demo} />;
}

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

import { Hero167 } from "@/components/beste/block/hero167";
import { Stats16 } from "@/components/beste/piece/stats16";

export default function Page() {
  return (
    <Hero167
      badge={{ label: "In her words, not ours" }}
      quote="We stopped ringing round to fill cancellations. That is the whole thing."
      speaker={{
        name: "Elena Rourke",
        role: "Practice lead, Bramble Health",
        avatar: { src: "/people/elena.jpg", alt: "Portrait of Elena Rourke" },
      }}
      provenance={[
        { label: "Said on", value: "12 May 2026, unprompted" },
        { label: "Practice", value: "Four sites, thirteen rooms" },
        { label: "Paid to say it", value: "No" },
      ]}
      description="Scheduling, records, and billing sit on one surface, and the waiting list fills its own cancellations."
      buttons={[
        { label: "Read her whole account", href: "/customers/bramble" },
        { label: "Book a demo", href: "/demo", tone: "outline" },
      ]}
      note="We publish the ones who were unhappy too, with the same amount of space."
      media={
        <Stats16
          label="Cancellations refilled"
          value="84%"
          delta="46 pts"
          direction="up"
          caption="at Bramble Health, since March"
          bars={[22, 31, 38, 52, 61, 70, 78, 88]}
        />
      }
      image={{ src: "/clinic/reception.jpg", alt: "A clinician in a bright clinic" }}
    />
  );
}

Props

type ButtonTone = "primary" | "neutral" | "outline";

type ActionLink = {
  label: string;
  href: string;
  tone?: ButtonTone;
};

type Speaker = {
  name: string;
  role: string;
  avatar: { src: string; alt: string };
};

type ProvenanceRow = {
  label: string;
  value: string;
};

Behavior notes

• The quotation marks are added by the block as “ and ” entities, so pass quote as plain text. Wrapping it in quotes yourself will double them.
• The quote is the h1. That is the point of the block: the customer sentence is the page's heading, and the product line is demoted to a paragraph below the fold of the hero.
• provenance is a real dl in a responsive grid, one column on mobile, two from sm, four from lg. It is designed for claims about the quote itself, when it was said and whether it was paid for, rather than for product statistics.
• Two hairlines structure the block: one opens the provenance table and one opens the product row. Both live on their own containers, so an empty provenance array removes its rule without leaving a gap.
• The lower row is a 1.3fr to 1fr split rather than an even one, which keeps the paragraph at a readable measure while the tile stays large enough for the figure to land.
• Button tones fall back positionally: tone is honored when set, otherwise the first button renders primary and every later one renders outline.
• The avatar is fixed at size-12 with shrink-0, so a long role line wraps under the name instead of squeezing the portrait.