Hero Search

Pill-shaped hero search bar with an embedded solid CTA button and a helper caption below.

Search over 12,000 templates…
Try “marketing landing”, “saas pricing”, or “portfolio”.

Requires shadcn/ui initialized. Run npx shadcn@latest init if you haven't.

Import & use
import { Search12 } from "@/components/beste/piece/search12";

<Search12
  placeholder="Search over 12,000 templates…"
  action="Search"
  helper="Try “marketing landing”, “saas pricing”, or “portfolio”."
/>

More Search pieces

View all Search
Search members, invoices, notes…⌘K

Command Search Bar

search23

A single-line search field with a leading magnifier, placeholder, and a monospace keyboard shortcut chip.

linen-chair.jpg
linen-chair.jpgFind similar products

Visual Search

search16

Image-attached search bar with an attached file chip, camera capture, and a search icon button.

Summarize last week's support tickets

AI Prompt Bar

search9

Gradient-bordered prompt input with a sparkle icon and a tinted Ask AI action button.

Search Shortcut

search22

Ghost pill button with a leading search icon, placeholder text, and a trailing keyboard shortcut badge. Useful as a header command-palette trigger.

launchesc
Launch plan Q2Docs
launch-prepChannel
Laura NgLaunch lead
↑↓ to navigate↵

Command Palette

search3

⌘K modal with a query bar, three typed results, and a keyboard-hint footer at the bottom.

Find last month's sales reportListening…

Voice Search

search8

Pill-shaped voice input with a pulsing mic, live transcript, and a waveform visualizer.