Command Palette

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

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

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

Import & use
import { Search3 } from "@/components/beste/piece/search3";

<Search3
  query="launch"
  results={[
    {
      "icon": "page",
      "label": "Launch plan Q2",
      "hint": "Docs"
    },
    {
      "icon": "channel",
      "label": "launch-prep",
      "hint": "Channel"
    },
    {
      "icon": "user",
      "label": "Laura Ng",
      "hint": "Launch lead"
    }
  ]}
  footerHint="↑↓ to navigate"
/>

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.

mira
Files
mira-handoff.figFigma
brand-mira.pdfDoc

Grouped Results

search10

Command menu with two sectioned buckets of results, each prefixed by a category label.

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.

design tokens
Searching across 42 workspaces…

Loading Results

search11

Search popover mid-query with a spinner in the input and three shimmering skeleton rows.

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

Hero Search

search12

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

is:open assignee:me label:
Suggested operators
label:bugBug reports
label:polishPolish
label:docsDocumentation

Operator Hints

search20

Power-query input paired with a suggestions panel that surfaces operator tokens and their meanings.