# Beste UI

> Beautiful, accessible blocks, pieces and components for shadcn/ui and Tailwind CSS, built for React and Next.js. Install one with the shadcn CLI and the code is yours to edit: no runtime dependency, nothing to upgrade.

Markdown rendition of https://ui.beste.co/block/hero171. Every page on the site has one: add `.md` to any address, or send `Accept: text/markdown`.

Last updated: 2026-08-12

Whole catalog for LLMs: https://ui.beste.co/llms.txt. Registry index: https://ui.beste.co/r/registry.json

---
1. /
2. [Blocks](/blocks)
3. /
4. [Hero](/blocks/hero)
5. /
6. Search-First Archive Hero

# Search-First Archive Hero[PRO](/pricing)

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.

ViewCodeDocs

Base UI

![](https://oud.pics/sm/l/npm.svg)`npx shadcn add https://ui.beste.co/r-base/hero171`

## 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.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

[Upgrade NowUpgrade Now](/pricing)

### Installation

Swap `YOUR_EMAIL` and `YOUR_KEY` for the email and license key on your account. Find your license key on your [account page](/account).

**Radix flavor**

bashCopy

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

**Base UI flavor**

bashCopy

```
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.

tsxCopy

```
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:

tsxCopy

```
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

| Prop             | Type                | Default | Description                          |
| ---------------- | ------------------- | ------- | ------------------------------------ |
| eyebrow          | string              | –       | Badge6 label above the headline      |
| heading          | string              | –       | Hero headline                        |
| description      | string              | –       | Supporting paragraph under it        |
| placeholder      | string              | –       | Placeholder in the search field      |
| submitLabel      | string              | –       | Label on the submit button           |
| suggestionsLabel | string              | –       | Words before the suggestion chips    |
| suggestions      | SuggestedSearch\[\] | \[\]    | Linked chips under the field         |
| note             | string              | –       | Line stating the size of the archive |
| className        | string              | –       | Extra classes for the outer section  |

tsCopy

```
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.

## More Hero blocks

[View all Hero](/blocks/hero)

[](/block/hero46)

PRO

hero46

### Search Hero with Popular Tags

Centered hero with prominent search input field and popular search suggestion pills below. Perfect for documentation sites, knowledge bases, and support centers.

[](/block/hero7)

FREE

hero7

### Centered Hero with Media

Centered hero with optional badge, heading, description, dual action buttons, and a featured image below. Perfect for product launches and landing pages.

[](/block/hero162)

PRO

hero162

### Indexed Rows Hero

A hero that sets a light display heading and one action against a column of numbered hairline rows, then closes on a full-bleed image band with a live approval request pinned into its corner.

[](/block/hero168)

PRO

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.

[](/block/hero164)

PRO

hero164

### Media-First Reverse Hero

A hero that opens on a full-bleed image band with a live phone frame anchored into it, then sets the eyebrow, light display heading, paragraph, and actions underneath rather than above.

[](/block/hero71)

PRO

hero71

### Pricing Preview Hero

Centered hero with prominent price display, period label, and horizontal feature checklist. Perfect for freemium products and pricing-focused landing pages.

## Ship the interface, keep the code.

New blocks, pieces and components every week. Install one with a command and it is yours to edit. No runtime dependency, no upgrade path to fight.

[Browse the libraryBrowse the library](/blocks)[See pricingSee pricing](/pricing)

### Library

* [Blocks](/blocks)
* [Pages](/pages)
* [Pieces](/pieces)
* [Components](/components)
* [Search](/search)

### Learn

* [Docs](/docs)
* [AI & MCP](/docs/mcp)
* [Blog](/blog)
* [Free tools](/tools)
* [What's new?](/changelog)
* [Website Builder](https://beste.co)

### More

* [Pricing](/pricing)
* [Referrals](/referrals)
* [License](/license)
* [GitHub](https://github.com/beste-co/beste-ui)

### Shadcn Blocks

* [Shadcn Hero Blocks](/blocks/hero)
* [Shadcn Feature Blocks](/blocks/feature)
* [Shadcn Pricing Blocks](/blocks/pricing)
* [Shadcn CTA Blocks](/blocks/cta)
* [Shadcn FAQ Blocks](/blocks/faq)
* [Shadcn About Blocks](/blocks/about)
* [Shadcn Stats Blocks](/blocks/stats)
* [Shadcn Footer Blocks](/blocks/footer)
* [Shadcn Navigation Blocks](/blocks/navigation)
* [Shadcn Auth Blocks](/blocks/auth)
* [Shadcn Ecommerce Blocks](/blocks/ecommerce)
* [Shadcn Portfolio Blocks](/blocks/portfolio)
* [Shadcn Showcase Blocks](/blocks/showcase)
* [Shadcn Careers Blocks](/blocks/careers)
* [Shadcn Onboarding Blocks](/blocks/onboarding)
* [Shadcn Coming Soon Blocks](/blocks/coming-soon)
* [Shadcn Post Blocks](/blocks/post)
* [Shadcn Legal Blocks](/blocks/legal)
* [Shadcn Workflow Blocks](/blocks/workflow)
* [Shadcn News Blocks](/blocks/news)

© 2026, [Beste](https://beste.co). All rights reserved.