Morphing Search Pill
Adaptive search pill that expands smoothly from a compact button into a full input field.
8.3 KB
•Updated on September 17, 2026
Installation
Bash
pnpm dlx shadcn@latest add @spaceui/components-spaceui-morphing-search-pillUsage
Code
import { MorphingSearchPill } from '@/components/spaceui/morphing-search-pill'
export default function Example() {
return <MorphingSearchPill />
}Props
| Prop | Type | Default | Description |
|---|---|---|---|
placeholder | string | Quick search... | Search field placeholder |
onSearch | (query: string) => void | — | Search query callback |
collapsedWidth | number | 64 | Width when collapsed in px |
expandedWidth | number | 280 | Width when expanded in px |
corner | number | 20 | Pill corner radius |
Keep in mind
- MIT License: Free and open-source for personal and commercial use. Feel free to copy, tweak, and adapt the components to match your exact needs.
- Credits & Inspiration: Some components on this site are inspired by or recreated from great ideas across the web. I'm not here to take credit; just to learn, experiment, and push interface craft further.
- Reach out & Claims: If an attribution was missed, or if you have any inquiry or claim, feel free to reach out directly on X to @adrielzimbril. I'll be glad to update or resolve it right away.
On This Page
Powered by