Search Bar

A hero centered on a prominent search bar below a headline and subtext. Ideal for directories, docs, marketplaces, and content heavy landing pages.

import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Search } from 'lucide-react';

export default function HeroSectionWithSearchBar() {
  return (
    <>
      {/* Hero */}
      <div className="relative overflow-hidden">
        <div className="container mx-auto px-4 py-24 md:px-6 lg:py-32 2xl:max-w-[1400px]">
          {/* Announcement Banner */}
          <div className="flex justify-center">
            <a
              className="inline-flex items-center gap-x-2 rounded-full border p-1 ps-3 text-sm transition"
              href="#"
            >
              New Feature: Advanced Search
              <span className="bg-muted-foreground/15 inline-flex items-center justify-center gap-x-2 rounded-full px-2.5 py-1.5 text-sm font-semibold">
                <svg
                  className="h-4 w-4 flex-shrink-0"
                  xmlns="http://www.w3.org/2000/svg"
                  width={24}
                  height={24}
                  viewBox="0 0 24 24"
                  fill="none"
                  stroke="currentColor"
                  strokeWidth={2}
                  strokeLinecap="round"
                  strokeLinejoin="round"
                >
                  <path d="m9 18 6-6-6-6" />
                </svg>
              </span>
            </a>
          </div>
          {/* End Announcement Banner */}

          {/* Title */}
          <div className="mx-auto mt-5 max-w-2xl text-center">
            <h1 className="text-primary max-w-4xl text-4xl leading-tight font-semibold tracking-tight text-balance lg:leading-[1.1] lg:font-semibold xl:text-5xl xl:tracking-tighter">
              Discover Everything You Need in Seconds
            </h1>
          </div>
          {/* End Title */}

          {/* Description */}
          <div className="mx-auto mt-5 max-w-3xl text-center">
            <p className="text-foreground max-w-4xl text-base text-balance sm:text-lg">
              Our powerful search engine helps you find exactly what you're
              looking for from millions of resources. Start exploring now!
            </p>
          </div>

          {/* Search Bar */}
          <div className="mx-auto mt-8 max-w-3xl">
            <form className="relative">
              <Input
                className="w-full rounded-full py-6 pr-16 pl-6 text-lg"
                placeholder="Search for articles, tutorials, or resources..."
                type="search"
              />
              <Button
                className="absolute top-1/2 right-2 -translate-y-1/2 rounded-full"
                size="icon"
                type="submit"
              >
                <Search className="h-4 w-4" />
              </Button>
            </form>
          </div>

          {/* Popular Searches */}
          <div className="mt-6 flex flex-wrap justify-center gap-4">
            {[
              'React Tutorials',
              'UI Design',
              'Shadcn Components',
              'Web Development',
            ].map((term) => (
              <Button key={term} variant="outline" className="rounded-full">
                {term}
              </Button>
            ))}
          </div>

          {/* Stats */}
          <div className="mt-12 grid grid-cols-3 gap-8 text-center">
            <div>
              <div className="text-primary text-3xl font-bold">10M+</div>
              <div className="text-muted-foreground text-sm">Resources</div>
            </div>
            <div>
              <div className="text-primary text-3xl font-bold">1M+</div>
              <div className="text-muted-foreground text-sm">
                Daily Searches
              </div>
            </div>
            <div>
              <div className="text-primary text-3xl font-bold">99%</div>
              <div className="text-muted-foreground text-sm">
                Satisfaction Rate
              </div>
            </div>
          </div>
        </div>

        {/* Background decoration */}
        <div className="absolute inset-0 -z-10 overflow-hidden">
          <div className="from-primary/20 to-secondary/20 absolute top-0 left-1/2 h-[500px] w-[500px] -translate-x-1/2 -translate-y-1/2 rounded-full bg-gradient-to-br opacity-30 blur-3xl" />
          <div className="from-accent/20 to-primary/20 absolute right-0 bottom-0 h-[500px] w-[500px] translate-x-1/2 translate-y-1/2 rounded-full bg-gradient-to-tl opacity-30 blur-3xl" />
        </div>
      </div>
      {/* End Hero */}
    </>
  );
}

About this block

Search Bar Hero opens with a small pill-shaped announcement banner centered at the top, followed by a large centered headline and a one-line description. Below the copy sits a full-width pill input with an icon button flush to its right edge. Under the input, a row of outline pill buttons lists popular search terms. The section closes with a three-column stat row showing a headline number and a short label in each column.

Every piece of copy here is independent. The announcement banner can be removed or reworded without affecting anything else. The popular-search buttons are a plain mapped list, so you can add, remove, or relabel terms freely. The three stats are also self-contained, so you can swap the numbers and labels to match your own data.

When to use

Reach for this block when the primary action on a page is finding something rather than signing up or buying. It fits creative agency portfolios and project directories where visitors arrive looking for a specific case study, service, or team. It also works well for knowledge bases and content libraries where the volume of material makes search the natural entry point. Compared to a simple centered hero with a single CTA button, this layout communicates depth and signals that a large catalog sits behind the page.

A natural flow around it on a Marketing (Legacy) page:

Before

Announcement Banners to carry a campaign or release message above the fold before the hero loads
A short nav or nothing at all, since the banner inside the block already carries contextual news

After

Feature Sections to explain what the search covers once a visitor wants more context
Testimonials to back up the satisfaction stat with real quotes from users

What you can display

The search input is the centerpiece, and the surrounding elements frame the scale of what it searches. A few directions this block suits well:

A curated work archive. Point the search at a filtered list of case studies and use the popular-term buttons to surface your most requested categories of creative work.
A resource or tutorial library. Swap the stats for article count, author count, and average rating to give first-time visitors a sense of the library's breadth before they type.
A vendor or freelancer directory. Replace the popular searches with common skill tags so visitors can jump straight to the results that match their hire brief.

Tip: keep the popular-search row to four or five short terms so the pills fit a single line on most screens and the layout stays clean.

About this block

When to use

A natural flow around it on a Marketing (Legacy) page:

Before

Announcement Banners to carry a campaign or release message above the fold before the hero loads
A short nav or nothing at all, since the banner inside the block already carries contextual news

After

Feature Sections to explain what the search covers once a visitor wants more context
Testimonials to back up the satisfaction stat with real quotes from users

What you can display

The search input is the centerpiece, and the surrounding elements frame the scale of what it searches. A few directions this block suits well:

A curated work archive. Point the search at a filtered list of case studies and use the popular-term buttons to surface your most requested categories of creative work.
A resource or tutorial library. Swap the stats for article count, author count, and average rating to give first-time visitors a sense of the library's breadth before they type.
A vendor or freelancer directory. Replace the popular searches with common skill tags so visitors can jump straight to the results that match their hire brief.

Tip: keep the popular-search row to four or five short terms so the pills fit a single line on most screens and the layout stays clean.

Search Bar

About this block

When to use

What you can display

Search Shadcn UI Blocks

About this block

When to use

What you can display