Framed Peek HeroPRO

Hero163: Framed Peek Hero

A hero framed inside a bordered card on a soft section, with centered copy and two actions above an image tile that runs past the card's bottom edge so the live metrics panel is cropped like a real screenshot.

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

Base UI flavor

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

This installs the block to components/beste/block/hero163.tsx, the dashboard33 metrics piece it crops at the card edge (installed to components/beste/piece/dashboard33.tsx), and the badge23 and button21 components it uses for the eyebrow and the actions.

Quick start

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

import { Hero163, hero163Demo } from "@/components/beste/block/hero163";

export default function Page() {
  return <Hero163 {...hero163Demo} />;
}

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

import { Dashboard33 } from "@/components/beste/piece/dashboard33";
import { Hero163 } from "@/components/beste/block/hero163";

export default function Page() {
  return (
    <Hero163
      badge={{ label: "Monday morning" }}
      heading="Open one tab and the week is already sorted"
      description="It opens on the numbers a practice lead checks first, so nobody spends the first hour assembling them by hand."
      buttons={[
        { label: "Start free", href: "/signup" },
        { label: "Book a walkthrough", href: "/demo", tone: "outline" },
      ]}
      note="Free for the first clinic, for as long as you like."
      media={
        <Dashboard33
          title="This week"
          range="Mon to Sun"
          items={[
            { label: "Booked", value: "142", delta: "+9", direction: "up" },
            { label: "No-shows", value: "3", delta: "-4", direction: "down" },
          ]}
        />
      }
      image={{ src: "/backdrops/green.jpg", alt: "Deep green gradient backdrop" }}
    />
  );
}

Props

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

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

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

Behavior notes

• The crop is deliberate and comes from a height mismatch: the wrapper is h-48 (then md:h-56) while the tile inside it is h-72 (then md:h-80). The card's overflow-hidden clips the difference, so the panel is cut off partway down instead of ending cleanly.
• Because the tile overflows its wrapper, changing the wrapper height is how you control how much of the piece is visible. Matching the two heights removes the effect entirely.
• The card is bg-background on a bg-muted section, so the frame reads as a raised surface. That inversion is what lets the border stay a single hairline rather than needing a shadow.
• The card has top padding but no bottom padding: the tile is meant to run into the bottom edge, so any bottom padding would break the crop.
• Button tones fall back positionally: tone is honored when set, otherwise the first button renders primary and every later one renders outline.
• The copy column is capped at max-w-2xl and centered inside the card, independent of the tile, which is capped at max-w-4xl. The two are sized separately so the screenshot can be wider than the text it sits under.