Expanding search
A search that takes over its screen, the way it does in the apps you use every day: the greeting folds away, the field rises to the top with Cancel beside it, and the shop gives way to results.
Osu, Accra
Good evening, Ama.What are we picking up?
Shop by aisle
FruitBakeryDairyDrinks
Picked for youAvocados£2.20Pack of 2Sourdough loaf£3.10800 g
Things to try
- Tap the search field. The greeting above it folds away, the field rises to the top, Cancel slides in beside it, and the shop gives way to your recent searches and what's popular.
- Type "oa". The list narrows to oat milk, sourdough loaf and rolled oats. What you typed stays quiet and the rest of each name is picked out, and the rows that stay slide into place.
- Press a +. It turns into a green tick as the product goes in your basket.
- Use the arrow keys. One highlight slides from row to row, and Enter picks it.
- Press Cancel or Escape. The greeting unfolds and the shop comes back.
Install
npx shadcn@latest add https://your-docs-site/r/expanding-search.jsonDependencies
npm install @base-ui/react @hugeicons/core-free-icons @hugeicons/react @remold-ui/react motionHow it works
- Nothing stretches. The greeting only folds its height, the field only shortens to make room for Cancel, and Cancel only grows its width from nothing. The shop and the results cross-fade in place.
- Results where the shop was. It's Base UI's Autocomplete, with the matches rendered into the screen itself rather than a floating menu, so it reads as the screen changing rather than something opening over it.
- Built for the keyboard. The field is a combobox, the first match is highlighted as you type so Enter picks it, Escape closes, and the recent searches are buttons that fill the field. Each add button says what it adds.
Event RSVP
An RSVP button that grows into a sheet for your answer, saves with a progress bar, and becomes your spot, all in one tray. Built almost entirely from Base UI parts.
Feedback prompt
A "Was this helpful?" pill that opens in place. Your thumb flies into the corner as the pill grows into a small card with quick reasons and room to say more, then the card draws back into a thank-you.