Search-First Archive HeroPRO

Hero171: Search-First Archive Hero

A centered hero whose main action is a search field rather than a button, with the week's most looked-up terms as chips beneath it and the size of the archive stated 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/hero171?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/hero171.tsx, the badge6 component used for the eyebrow, and the shadcn/ui input and button primitives behind the search row.

Quick start

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

import { Hero171, hero171Demo } from "@/components/beste/block/hero171";

export default function ArchivePage() {
  return <Hero171 {...hero171Demo} />;
}

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

import { Hero171 } from "@/components/beste/block/hero171";

export default function ArchivePage() {
  return (
    <Hero171
      eyebrow="The archive"
      heading="Four years of studio writing, one search box"
      description="Every essay, teardown and template we have published, searchable in full."
      placeholder="Search for a problem you are having"
      submitLabel="Search"
      suggestionsLabel="Looked up most this week"
      suggestions={[
        { label: "estimates", href: "/search?q=estimates" },
        { label: "handover", href: "/search?q=handover" },
      ]}
      note="186 pieces published, none of them removed."
    />
  );
}

Props

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

Behavior notes

• The field is controlled, so the typed query is available to the submit handler. That handler logs the query and calls preventDefault, which is the seam to replace with your own search route.
• The magnifier is pointer-events-none and the input carries pl-12, so the icon never eats a click and the caret starts clear of it.
• Suggestions are real links rather than buttons that fill the field, so each one is a page a search engine and a reader can both reach.
• The row is one line from sm up and stacks below it, with both the field and the button at h-14.
• The hero uses taller padding than a section, py-20 md:py-32, since it is meant to open a page rather than sit inside one.