Search Field

Static search affordance with a lucide icon, placeholder, and an optional shortcut chip on the right.

Search anything...

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

Import & use
import { Search1 } from "@/components/beste/piece/search1";

<Search1
  placeholder="Search anything..."
  shortcut={[
    "⌘",
    "K"
  ]}
/>

More Input pieces

View all Input
Ξ
0x4A81…6fA0ENS
Ethereum · Mainnet

Crypto address field with a gradient Ξ avatar, shortened mono address, and an ENS lookup chip.

Mira violet#6D5EFA

Color field pairing a filled swatch with the chosen name and hex code and an eyedropper button.

design tokens

Pill-shaped search input with a leading magnifier and an inline pill-shaped clear when there is a value.

small, compact, dense

Tight small-size text field for data tables and filter rails, with smaller type and tight padding.

Beste Sözen

Bare text input atom with a focused state that adds a primary ring and a blinking caret after the value.

/^[a-z]+@beste\.co$/gi42

Regex field with slash delimiters, flag suffix in amber, and an emerald match-count pill on the right.