Expanding search

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

Library

Arc Library

Framework

React

Type

ui

License

MIT

Dependencies

lucide-react, motion

Install

npx shadcn@latest add https://uiarc.dev/r/expanding-search.json

Files

• registry/components/expanding-search/expanding-search.tsx
• registry/components/expanding-search/expanding-search.module.css
• registry/motion-tokens.ts
• lib/motion-tokens.ts

Source

https://github.com/kuratlielia/arc-library

Categories

• Input Components
• React Input Components
• Animated Input Components
• Search Input Components
• React Search Input Components
• Animated Search Input Components
• Text Input Components
• React Text Input Components
• Animated Text Input Components

More from Arc Library

• Input
• Money input
• Number field
• OTP input
• Password field
• Password strength
• Phone input
• Search field
• Accordion
• Action button
• Action swap
• Activity heatmap