Search Bar
Google-like search component for finding and linking to external resources.
Live Demo
Search Scientific Resources
Find databases, tools, and literature across the scientific ecosystem. Results open in new tabs.
Popular Resources
PubMed
Biomedical literature from MEDLINE, life science journals, and online books
UniProt
Comprehensive resource for protein sequence and functional information
NCBI BLAST
Basic Local Alignment Search Tool for sequence similarity searching
Protein Data Bank (PDB)
3D structural data of large biological molecules
KEGG Pathway
Collection of pathway maps for molecular interaction and reaction networks
ClinicalTrials.gov
Database of clinical studies conducted around the world
Browse by Category
Implementation
Installation
npx shadcn@latest add showcase-app/search-barBasic Usage
import { SearchBar } from '@/components/ui/search-bar';
<SearchBar
placeholder="Search..."
results={results}
onSearch={handleSearch}
onResultClick={handleClick}
/>Props
interface SearchBarProps {
placeholder?: string;
results?: SearchResult[];
recentSearches?: string[];
trendingSearches?: string[];
onSearch: (query: string) => void;
onResultClick?: (result) => void;
onClear?: () => void;
isLoading?: boolean;
}SearchResult Interface
interface SearchResult {
id: string;
title: string;
description: string;
url: string;
category?: string;
icon?: ReactNode;
}Features
- • Keyboard navigation (↑↓ Enter Esc)
- • Recent searches history
- • Trending searches
- • Loading state indicator
- • External link handling
- • Category badges
- • Custom icons per result
Keyboard Shortcuts
Navigate results↑ ↓
Open selectedEnter
Close dropdownEsc
Best Practices
- • Debounce search requests
- • Show loading state for async
- • Limit results to 5-10 items
- • Include URL preview
- • Open external links in new tab