Filter Chips

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

status: openpriority: highlabel: bugSearch issues…

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

Import & use

import { Search5 } from "@/components/beste/piece/search5";

<Search5
  placeholder="Search issues…"
  filters={[
    "status: open",
    "priority: high",
    "label: bug"
  ]}
/>

More Search pieces

View all Search

linen-chair.jpgFind similar products

Visual Search

search16

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

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.

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.

Search docs and guides…

Trending

Trending Queries

search14

Search field followed by a row of trending query chips led by a small flame label.

Search issues, docs, and threads…

Scoped Search

search15

Combined control with a left scope dropdown and a wider query input sharing a single pill.