Hero168: Search Reach Hero

A hero pairing a light display heading with an offset paragraph and action, then a wide image tile floating a live search results panel over four hairline columns explaining what the search covers.

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

Base UI flavor

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

This installs the block to components/beste/block/hero168.tsx, the search24 results piece it floats on the tile (installed to components/beste/piece/search24.tsx), and the badge23 and button21 components it uses for the eyebrow and the action.

Quick start

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

import { Hero168, hero168Demo } from "@/components/beste/block/hero168";

export default function Page() {
  return <Hero168 {...hero168Demo} />;
}

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

import { Hero168 } from "@/components/beste/block/hero168";
import { Search24 } from "@/components/beste/piece/search24";

export default function Page() {
  return (
    <Hero168
      badge={{ label: "One keystroke" }}
      heading="Stop asking which system it was filed in"
      description="Members, appointments, documents, and invoices are searched at once, and answered while you are still typing the surname."
      button={{ label: "Try it on your data", href: "/search" }}
      media={
        <Search24
          query="rowan"
          groupLabel="Members"
          results={[
            { title: "Rowan Blake", meta: "Active · Clinic 2", kind: "Member" },
            { title: "Invoice #4821", meta: "Rowan Blake · Paid", kind: "Billing" },
          ]}
          footer="2 of 11 matches shown"
        />
      }
      image={{ src: "/backdrops/green.jpg", alt: "Deep green gradient backdrop" }}
      reach={[
        { title: "Members", description: "Names, aliases, and every reference number you have used." },
        { title: "Documents", description: "Notes, letters, and uploads, searched by their contents." },
      ]}
    />
  );
}

Props

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

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

type Reach = {
  title: string;
  description: string;
};

Behavior notes

• The header row uses md:items-end, so the paragraph and action align to the heading's baseline rather than the top of the row, with md:pb-2 compensating for the heading's line height.
• The eyebrow lives inside the heading column, not above the grid, which is what keeps it aligned to the heading rather than to the container edge.
• The right column is flex flex-col items-start, so Button21 keeps its intrinsic width instead of stretching to the column.
• The reach columns each carry their own border-t, so the row of rules is built per item. Passing three items gives three rules, and the grid reflows to sm:grid-cols-2 and lg:grid-cols-4 without the rules ever spanning a gap.
• Reach titles render as h2, keeping the section a real outline under the h1 rather than a set of styled paragraphs.
• The tile is a fixed band (h-80, then md:h-96) with the image absolutely positioned behind it and the piece layered at z-10, so the search panel reads as floating over the photograph rather than sitting beside it.