Country dropdowns sound easy until you build one. Then you realize you need: searchable list, flag images that don't tank your bundle, keyboard navigation, ARIA, and a way to hydrate the data without re-fetching on every component mount.

This is a drop-in component for Tailwind / shadcn projects. ~80 lines, no extra dependencies, works with any state management.

Component code

Save as components/CountryDropdown.tsx :

' use client ' ; import { useEffect , useMemo , useRef , useState } from ' react ' ; interface Country { iso2 : string ; name : string ; flagUrl : string ; } interface Props { countries : Country []; value ?: string ; onChange : ( iso2 : string ) => void ; placeholder ?: string ; } export function CountryDropdown ({ countries , value , onChange , placeholder = ' Select a country… ' }: Props ) { const [ open , setOpen ] = useState ( false ); const [ query , setQuery ] = useState ( '' ); const ref = useRef ( null ); const selected = countries . find (( c ) => c .…