WellSourced

Search bar

The primary way into the product. The hero variant anchors the landing page; the compact variant lives in the header once the user is deeper in.

Hero#

Compact#

Usage#

  • Placeholder shows real queries, not hints. “Search organic cotton shirts, Japanese denim” — not “Type to search…”.
  • Hero variant has one job: invite. Center it, give it air. Never pair it with a second large input.
  • Keyboard shortcut is ⌘K. Implemented app-wide. Show it on desktop; hide on mobile.
  • Focus lights the border teal. Never remove the focus ring — it's how keyboard users see where they are.

Props#

NameTypeDefaultDescription
variant"hero" | "compact""hero"Visual size and emphasis.
placeholderstring"Search organic cotton shirts, Japanese denim, …"Hint text. Keep concrete — show real example queries.
shortcutstring—Keyboard shortcut shown on the right, e.g. "⌘K".

Code#

tsx
import { SearchBar } from "@/components/ui/SearchBar";

<SearchBar shortcut="⌘K" />
<SearchBar variant="compact" placeholder="Search brands" />