Dev Design LibrarySearch Input Components
Dev Design Library indexes 110 search input components from 40 open-source UI libraries, with the most coming from Tremor Blocks, Origin UI, ReUI, Shadcn Space and Spectrum UI. Each one links to its page with the source code, a live preview where available, the library license and the install command. Search input components belong to the Inputs group.
Search FieldHeroUI · ReactA compound search input for filtering and querying content.
Search FieldReact Spectrum · ReactA SearchField is a text field designed for searches.
Autocompletecoss ui · ReactAn input that suggests options as you type.
Comp 229Origin UI · React
Halo SearchCult UI · ReactSearch input with animated gradient border, staggered placeholder, blur deletion on clear, loading line, and Warp…
Input Clear With Dissolvetransitions.dev · HTML/CSSInput whose text dissolves away when the clear button is pressed.
AutocompleteReUI · ReactAn input that suggests options as you type.
Button SearchAmicro Micro Transitions · React
Search BarLobe UI · ReactSearchBar that includes an input field with a search icon and clear button, allowing users to easily search for…
Command PaletteKokonut UI · React⌘K command palette with nested pages, fuzzy matching and in-row progress for running actions.
search-fieldIntent UI · Reactsearch-field
Morphing SearchbeUI · ReactSearch field or compact icon that morphs into a glass results surface, whether opened by click or keyboard shortcut.
Web SearchRare UI · ReactThe sources behind an AI answer, shown as a search pill, source cards, a streaming answer, and inline citations.
Beam Search BarSpectrum UI · ReactA search bar whose bottom edge lights up with a traveling beam while it has focus.
Gooey SearchVengeance UI · ReactMorphing gooey blob search button with animated results
Sidebar Search FieldFluid Functionalism · ReactHeader search on the menu rows' rhythm: leading icon on the rows' 16px axis, text on the 32px axis, and a…
Search BarPanel UI · React NativeSearch field with a clear button, a Cancel button and a panel of results.
Autocomplete-04 - Team Member SearchShadcn Space · ReactAutocomplete with grouped team members, avatars, status dots, and spring-animated list items
Search InputOpenSourceUI · React
Morphing Inputuselayouts · ReactAn input field that morphs between different states.
Expanding SearchKinetics · HTML/CSSField grows on hover or focus, glide easing
Filterbar 01Tremor Blocks · React
Faq Fourcnblocks · SvelteFAQ section with search and categories
Morph Search CapsuleRewamp UI · ReactSleek, tactile search pill capsule with click ripple physics and a buttery-smooth fluid SVG morph transition between…
Expanding searchArc Library · ReactAn icon that morphs into a search field with results beneath it.
Debounce Inputsv-table · SvelteA search input with an optional delay for value changes.
Expanding SearchUI Lab · ReactOpens from a circle into a search field, and closes faster than it opens.
GGUF Explorer BlockLocalMode · ReactBrowse 160,000+ HuggingFace GGUF models and the curated wllama catalog, inspect any file's metadata via a ~4KB HTTP…
AutocompleteROI UI · ReactAn input that suggests options as you type.
Hero 09FLX UI · ReactA centered real-estate hero with a search bar, a masked architecture image that fades into the page, and a split…
Mega menu navbarVelora UI · ReactTop bar with a keyboard-accessible Product mega menu, search, sign-in and a slide-over mobile menu.
Command Search PatternHalaska UI · React
Search Input With Loader And Voicesv-particles · Svelte
Search FieldOUI · ReactReact aria components Search Field with shadcn characteristics.
Dashboard 01D2Studio UI · ReactHotel booking dashboard with guest and vacancy stats, booking search and a check-in and check-out table.
Morphing SearchEaseUI · ReactA circular search button that morphs into a text field: the same element grows and reshapes via a layout animation…
Glass InputOpaline · ReactCapsule text field with icon and adornment slots — made for search.
Search InputFibo · ReactA search box with a Cmd+K shortcut and a clear button, and a compact trigger for a header whose search opens in a…
Product ListReactFrame · ReactAn eCommerce product listing block with a filter sidebar (live search, Free/Premium tiers, categories) and a…
Gooey InputAceternity UI · React
Tailwind Search FieldReact Spectrum · React
Comp 230Origin UI · React
Basic autocomplete controlReUI · ReactBasic autocomplete control
AI Input SearchKokonut UI · ReactAI composer with a Tools menu (browse, investigate, draft, run code, reason), a model picker and a live trace that…
Command SearchSpectrum UI · ReactA command palette that types queries and live-filters grouped results, with keyboard navigation.
Autocomplete-05 - Async SearchShadcn Space · ReactAutocomplete with debounced async search, loading spinner, error handling, avatars, and spring-animated results
Spotlight BarOpenSourceUI · React
Vector RecallKinetics · HTML/CSSNearest embeddings drift in as a query ring sweeps the space
Filterbar 02Tremor Blocks · React
Animated Search DemoRewamp UI · React
Search fieldArc Library · ReactA recognizable search entry point with clear affordances.
Semantic Search BlockLocalMode · ReactFull text/PDF/OCR ingest into its OWN corpus with off/recursive/semantic chunking and a live chunk-boundary preview…
Vanish InputVelora UI · ReactSearch field whose placeholder cycles while empty.
Search InputHalaska UI · React
Search Tablesv-particles · Svelte
Search BarReactFrame · ReactAn accessible animated search field with a live suggestions menu, keyboard navigation, a clear button, a loading…
Placeholders And Vanish InputAceternity UI · React
Vanilla Search FieldReact Spectrum · React
Comp 231Origin UI · React
Small autocompleteReUI · ReactSmall autocomplete
Link Search FooterSpectrum UI · ReactType-to-filter across every footer link, with arrow-key navigation.
Command-04 - Team Member SearchShadcn Space · ReactCommand component for searching and inviting team members
Filterbar 03Tremor Blocks · React
Image Search BlockLocalMode · ReactText→image AND image→image search over one shared CLIP vector space — embed a free-text query or a reference image and…
With Keyboard Shortcut Searchsv-particles · Svelte
Comp 232Origin UI · React
Large autocompleteReUI · ReactLarge autocomplete
Page Not FoundSpectrum UI · ReactA 404 that prints the path it tried and filters real destinations as you type.
Command-06 - Search FilesShadcn Space · ReactCommand component for searching files
Filterbar 04Tremor Blocks · React
Model Search BrowserLocalMode · ReactA cmdk-based searchable model-repo browser: a controlled search input, a sort selector…
With Searchsv-particles · Svelte
Comp 233Origin UI · React
Form integrationReUI · ReactForm integration
No Search ResultsSpectrum UI · ReactA no-results state that echoes the query and resolves when a suggestion is taken.
Command-07 - Filter SearchShadcn Space · ReactCommand component for filter search
Filterbar 05Tremor Blocks · React
Comp 234Origin UI · React
Disabled stateReUI · ReactDisabled state
Web SearchSpectrum UI · ReactAgent search results with a live reading indicator.
Dropdown Menu 05 - SearchShadcn Space · ReactA search dropdown that expands in place with live filtering, category chips, recent and trending searches, and…
Filterbar 06Tremor Blocks · React
Comp 235Origin UI · React
Auto highlight option as you typeReUI · ReactAuto highlight option as you type
Input 22 - Search with ShortcutShadcn Space · ReactSearch input with a Cmd/Ctrl K shortcut hint, loading spinner, clear button, and live result status.
Filterbar 07Tremor Blocks · React
Comp 25Origin UI · React
Control with labelReUI · ReactControl with label
KBD 04 - KBD in Search InputShadcn Space · ReactSearch input with KBD shortcut in the input group addon, with Mac/Windows platform switch
Filterbar 08Tremor Blocks · React
Comp 26Origin UI · React
With clear buttonReUI · ReactWith clear button
Topbar 06 - Search Focused TopbarShadcn Space · ReactClean topbar with a prominent search bar, sidebar toggle, notifications, and profile actions for faster navigation and…
Filterbar 09Tremor Blocks · React
Comp 27Origin UI · React
With trigger buttonReUI · ReactWith trigger button
Filterbar 10Tremor Blocks · React
Comp 333Origin UI · React
With clear and trigger buttonsReUI · ReactWith clear and trigger buttons
Filterbar 11Tremor Blocks · React
Comp 478Origin UI · React
With groups and labelsReUI · ReactWith groups and labels
Filterbar 12Tremor Blocks · React
Comp 571Origin UI · React
With search resultsReUI · ReactWith search results
Filterbar 13Tremor Blocks · React
Comp 572Origin UI · React
Filterbar 14Tremor Blocks · React
Filterbar 15Tremor Blocks · React
Filterbar 16Tremor Blocks · React
Libraries with search input components
Related categories
- React Search Input Components
- Tailwind CSS Search Input Components
- Svelte Search Input Components
- Animated Search Input Components
- shadcn/ui Search Input Components
- Input Components
- Text Input Components
- Select Components
- Form Field Components
- Form Components
- Textarea Components
- Switch Components
- Checkbox Components
- Slider Components
- Radio Components
- Combobox Components
- File Upload Components
- Date Picker Components
- Login Form Components
- Color Picker Components
- OTP Input Components