Address Lookup - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/address-lookup

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import { AddressLookup } from "@/components/ui/address-lookup"

<AddressLookup onSelect={(address, coords) => console.log(address, coords)} />

API Reference

Prop	Type	Default	Description
`value`	`string`	—	Controlled address value.
`onChange`	`(value: string) => void`	—	Called on every input change.
`onSelect`	`(address: string, coords: [number, number] \| null) => void`	—	Called when an address suggestion is selected.
`placeholder`	`string`	`"Start typing an address..."`	Input placeholder text.
`showMap`	`boolean`	`true`	Whether to show the map preview.

Address

Select an address