Save yourself the manual work — drop-in address autocomplete.📍

Modern address autocomplete for shadcn/ui.

Session-token billing, typed place results, and a polished dropdown.
Copy-paste friendly. Customizable. Open Source.

shadcn@latest add https://shadcn-google-maps.vercel.app/r/places-autocomplete.json

Unlike most snippets that still wire up the legacy AutocompleteService, this component uses AutocompleteSuggestion, which Google recommends for new integrations.

import { PlacesAutocomplete } from "@/components/ui/places-autocomplete"
 
export default function AddressField() {
  return (
    <PlacesAutocomplete
      className={...}
      countryCode={...} // Optional, e.g. "US", "IN", "GB" etc.
      placeholder="Search for an address"
      onPlaceSelect={(place) => {
        console.log(place.address, place.lat, place.lng, place.placeId)
      }}
    />
  )
}
 
// Install with:
// bunx shadcn@latest add https://shadcn-google-maps.vercel.app/r/places-autocomplete.json

import { PlacesAutocomplete } from "@/components/ui/places-autocomplete"
 
export default function AddressField() {
  return (
    <PlacesAutocomplete
      className={...}
      countryCode={...} // Optional, e.g. "US", "IN", "GB" etc.
      placeholder="Search for an address"
      onPlaceSelect={(place) => {
        console.log(place.address, place.lat, place.lng, place.placeId)
      }}
    />
  )
}
 
// Install with:
// bunx shadcn@latest add https://shadcn-google-maps.vercel.app/r/places-autocomplete.json

Examples

Country restriction

Suggestions biased to United States (includedRegionCodes)