#What is SearchAddress Component?

SearchAddress Component is a free, open-source React component by UretzkyZvi, designed to extend shadcn-ui with an interactive address search interface powered by OpenStreetMap’s Nominatim service. It’s ideal for developers building forms requiring address input, such as delivery apps, real estate platforms, or location-based services, in Next.js or React projects.

Built with React, TypeScript, Tailwind CSS, shadcn-ui, lucide-react, and leaflet-geosearch, it offers autocomplete suggestions, grouped results by address type, and a debounced input for performance. The component integrates via shadcn CLI. It avoids reliance on paid APIs like Google Places, unlike shadcn-address-autocomplete.

#Features ⚡️

• Autocomplete Search: Provides real-time address suggestions as users type, using Nominatim.

• Grouped Results: Organizes results by address type (e.g., city, street) for clarity.

• Interactive UI: Uses shadcn-ui’s Popover for clickable/touchable result selection.

• Debounced Input: Limits API calls with a 500ms delay via useDebounce hook.

• Multiple Providers: Supports leaflet-geosearch for extensible geocoding providers.

• Accessible Design: Inherits shadcn-ui’s WAI-ARIA compliance.

• CLI Integration: Install via npx shadcn@latest add [URL TBD] (URL not specified; manual file copy needed).

#Pros and Cons

#Pros ✅

• shadcn-ui Compatibility: Aligns with shadcn-ui’s aesthetic and accessibility.

• Free and Open-Source: MIT license allows unrestricted use; no paid API required.

• Performance Optimized: Debounced input reduces API load.

• Extensible: leaflet-geosearch supports multiple geocoding providers.

#Cons ⚠️

• React Dependency: Limited to React/shadcn-ui ecosystems.

• Setup Complexity: Requires shadcn-ui, leaflet-geosearch, and manual file placement (search-address.tsx, hooks).

• Nominatim Limits: OpenStreetMap’s free API has usage restrictions for heavy traffic.

• No CLI URL: Lacks a direct shadcn CLI JSON link, requiring manual setup.

• Client-Side Focus: API calls are client-side; server-side caching needs custom logic.

#Included Components

• SearchAddress: Main component for address input and popover results.

• useDebounce: Hook to debounce search input for performance.

• useSearchAddress: Hook managing query state, results, and Nominatim API calls.

• Popover: shadcn-ui’s Popover, Command, and CommandItem for UI.

#Pricing 💸

SearchAddress Component is completely free under the MIT license. No API costs, but Nominatim’s usage policy applies for high-volume applications.

#Integrations 🧰

• React: Core framework for the component.

• shadcn-ui: Provides accessible primitives (Button, Popover, Command).

• Tailwind CSS: Utility-first styling for responsive design.

• Next.js: Supports Next.js with dynamic imports to avoid SSR issues.

• TypeScript: Ensures type safety.

• leaflet-typescriptgeosearch: Enables geocoding via OpenStreetMap’s Nominatim.

• lucide-react: Icons for UI elements (e.g., Check, ChevronsUpDown).

• OpenStreetMap Nominatim: Free geocoding API for address search.