Geo Location Picker
Checkout or order flows where the customer confirms a pickup or delivery point.
Choose the primitives library your project already uses. Both look the same: your theme, not the variant, controls colors, shape, type and motion.
About this block
What it's for
- Checkout or order flows where the customer confirms a pickup or delivery point.
- Travel listings or bookings that need a meeting point or property location.
- Field operations or dispatch forms that record an incident or job site.
For drawing areas or zones rather than a single point, use Geo Geofence Editor. For comparing metrics between regions, use Geo Area Comparison.
Includes
- Place search
- Search highlighting
- Coordinate input
- Draggable pin
- Click to drop
- Keyboard pin nudge
- Reverse geocoding
- Address precision
Works with
- Radix UI and Base UI primitives (pick the one your project uses)
- React 19 and Tailwind CSS 4 in Next.js (App Router), Vite, React Router or TanStack Start, installed with the agentic-ui or shadcn CLI
- Your theme tokens, in light and dark mode
Install
Included with Agentic UI Kit (one-time license). Install needs your license key: see pricing · connect your project.
agentic-ui add geo-location-pickernpx shadcn@4.17.0 add @agentic-ui/geo-location-pickerUsed in
A standalone component: drop it into any screen.
- Type
- Block
- Variants
- Radix UI and Base UI
- Themes
- Light and dark
- Widths
- Preview it at desktop, tablet and mobile widths above.
- npm packages
lucide-react- Registry dependencies
lib-primitiveslib-tokens- Files
3 files
- components/agentic-ui/geo-location-picker/location-picker.tsx
- components/agentic-ui/geo-location-picker/types.ts
- components/agentic-ui/geo-location-picker/model.ts
Related components
Geo Area Comparison
Regional sales scorecard: net sales, orders, order value and return rate by state.
Details and live previewGeo Cluster Layer
EV charging network overview where clusters reveal how many stations are available, charging or faulted before zooming in.
Details and live previewA11y Contrast Badge
Check in the browser whether the theme palette meets AA before opening the PR.
Details and live previewA11y Focus Manager
Confirmation dialog that returns focus to the button that opened it.
Details and live preview