Typeahead Dropdown

Search input with a dropdown of autocompletions that bolds the matched substring.

ship
shipping address
shipping labels API
shipping zones setup

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

Import & use
import { Search4 } from "@/components/beste/piece/search4";

<Search4
  query="ship"
  suggestions={[
    "shipping address",
    "shipping labels API",
    "shipping zones setup"
  ]}
/>

More Search pieces

View all Search
design tokens42

Active Query

search2

Focused search input with a typed query, blinking caret, hit counter, and clear button.

linen
Washed linen pillow4.8
$48
Linen throw blanket4.6
$112
Natural linen apron4.9
$34

Product Autocomplete

search18

Ecommerce suggestions dropdown with a warm thumbnail, rating line, and trailing price column.

and
Andrea Kim
Andrea KimDesign
Andre Costa
Andre CostaGrowth
Anders Lee
Anders LeeEngineering

People Autocomplete

search17

Mention-style popover listing matching people with avatars, role lines, and a presence dot.

Search workspace…
Recent
invoice template
onboarding checklist
Q1 roadmap
kickoff notes

Recent Searches

search6

Popover that opens on focus and lists prior queries with a clock icon and remove control.

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 issues…
Saved searches
My open issuesassignee:me is:open
This week's bugslabel:bug created:>7d
Stale PRsis:pr draft:false updated:<14d

Saved Searches

search21

Search popover listing named saved queries with pin or star markers and a raw query beneath.