Expanding search

An icon that morphs into a search field with results beneath it.

$npx shadcn@latest add @silicon-ui/expanding-search

searchfieldmotion

Installation

$npx shadcn@latest add @silicon-ui/expanding-search

Install the dependencies.
$npm install lucide-react motion
Copy these files into your project. Shared files are skipped if you already have them.
- components/silicon-ui/expanding-search/expanding-search.tsx
- components/silicon-ui/expanding-search/expanding-search.module.css
Install the foundation once per app for the design and motion tokens: $npx shadcn@latest add @silicon-ui/silicon-foundation

Source codetsx

import { ExpandingSearch } from "@/components/silicon-ui/expanding-search/expanding-search";

Prop	Type	Default
`label*` Names the button, the field, and the results, such as "Search projects and docs".	`string`	—
`items*`	`ExpandingSearchItem[]`	—
`suggestions` Shown before anything is typed, such as recent searches.	`ExpandingSearchItem[]`	`[]`
`suggestionsLabel`	`string`	`"Recent"`
`placeholder`	`string`	—
`onSelect`	`(item: ExpandingSearchItem) => void`	—
`onExpandedChange`	`(expanded: boolean) => void`	—
`expandedWidth` The widest the field grows. It never grows past its container.	`number`	`360`
`maxResults`	`number`	`6`
`anchor` The edge the button sits on; the field grows away from it.	`"start" \| "end"`	`"end"`
`emptyHint` A short tip under the empty state.	`string`	`"Try a shorter word or check the spelling."`
`className`	`string`	—