Full Bleed Image HeroPRO

Hero146: Full Bleed Image Hero

Full-bleed photographic hero: a gradient scrim over the image, an eyebrow above an oversized light heading, paired accent and hairline actions, and a row of three proof figures along a rule at the bottom.

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

Base UI flavor

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

This installs the block to components/beste/block/hero146.tsx plus the button21 component it uses for the actions.

Quick start

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

import { Hero146, hero146Demo } from "@/components/beste/block/hero146";

export default function Page() {
  return <Hero146 {...hero146Demo} />;
}

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

import { Hero146 } from "@/components/beste/block/hero146";

export default function Page() {
  return (
    <Hero146
      eyebrow="One workspace for care teams"
      heading="The day runs quieter when everything lives in one place"
      description="Intake, scheduling, records, and billing on a single surface."
      buttons={[
        { label: "Book a demo", href: "/demo" },
        { label: "See the product tour", href: "/tour" },
      ]}
      image={{ src: "/images/clinic.jpg", alt: "A clinician in a bright clinic" }}
      stats={[
        { value: "240", label: "Practices running on it" },
        { value: "6.5h", label: "Given back weekly, per clinician" },
        { value: "4 weeks", label: "From signature to go-live" },
      ]}
    />
  );
}

Props

type ActionLink = { label: string; href: string };

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

Behavior notes

• Button tone is decided by position, not by data: index 0 renders solid accent and every other button gets the hairline outline restyled for a dark surface. Order the array to match the emphasis you want.
• Those outline buttons take a border-background/30 override, because the component's stock outline tone is drawn for a light surface and would disappear against the photo.
• This is a fixed dark surface, so its copy uses the fixed text-background tokens rather than the adaptive ones. It reads the same in light and dark mode by design.
• The section itself carries bg-foreground, which is what fills the area while the photo is still loading rather than flashing the page background through the scrim.
• The scrim is a three-stop gradient, heaviest at the bottom, so the stat row keeps its contrast over whatever part of the image ends up behind it.
• The section sets its own generous vertical rhythm (py-24, md:py-40) instead of a viewport height, so a short hero never leaves a gap and a long one is never clipped.
• Stats are strings, so 6.5h and 4 weeks need no unit prop, and the row simply does not render when stats is empty.