Command Search Bar

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

Search members, invoices, notes…⌘K

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

Import & use

import { Search23 } from "@/components/beste/piece/search23";

<Search23
  placeholder="Search members, invoices, notes…"
  shortcut="⌘K"
/>

More Search pieces

linen-chair.jpgFind similar products

search16

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

launchesc

Launch plan Q2Docs

launch-prepChannel

Laura NgLaunch lead

↑↓ to navigate↵

search3

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

status: openpriority: highlabel: bugSearch issues…

search5

Multi-filter search bar with removable token chips inline with the placeholder.

search22

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

Search over 12,000 templates…

Try “marketing landing”, “saas pricing”, or “portfolio”.

search12

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

Summarize last week's support tickets

search9

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