127 Components
Expanding Search Pill
NavigationAirbnb-style compact floating search pill that fluidly morphs with layout springs into an expanded multi-segment drawer with destination, date, and guest selection panels.
Airbnb Expanding Search PillShared Spring Layout
Morphs from a compact floating status pill into an interactive multi-segment drawer
Matched Escapes for: Anywhere (1 guest)3 available
Superhost★ 4.98
Panoramic Villa overlooking Mediterranean
Amalfi Coast, Italy
$480 / night
Guest favorite★ 4.96
Traditional Machiya Zen Sanctuary
Kyoto, Japan
$295 / night
Rare find★ 4.99
A-Frame Snow Chalet with Private Hot Tub
Aspen, Colorado
$620 / night
Quick Presets:
Installation
Install directly into your project using the shadcn CLI or copy the source code manually.
Requires:framer-motionlucide-reactclsxtailwind-merge
$npx shadcn@latest add "https://boseui.site/r/expanding-search-pill.json"
Props
TypeScript props supported by <ExpandingSearchPill />.
| Prop | Type | Default | Description |
|---|---|---|---|
| initialDestination | string | "Anywhere" | Default destination text shown in the first segment. |
| initialDateRange | string | "Any week" | Default travel duration or date range string. |
| initialAdults | number | 1 | Default adult guest count. |
| onSearch | (state: SearchState) => void | — | Callback invoked when search is triggered with current parameters. |
| className | string | — | Additional CSS classes for the container wrapper. |
| embedded | boolean | — | Whether pill renders embedded in container or floating with fixed coordinates |
Key Features
- Compact pill showing dynamic summary for destination, travel dates, and guest headcount.
- Framer Motion layoutId morphing between compact pill and expanded multi-segment drawer.
- Interactive tabbed popover sheets for destination regions, date presets, and guest steppers.
- Live reactive simulated results cards updating as filters and guest parameters change.
- Click outside and escape key handling with smooth spring collapse physics.
Keyboard & Accessibility
- Interactive segments support standard keyboard navigation (Enter / Space).
- Descriptive ARIA labels for search triggers and guest stepper buttons.
- Disabled steppers communicate minimum boundaries (e.g. at least 1 adult required).