Getting Started
Google Maps autocomplete for the shadcn ecosystem.
Why autocompletecn?
Integrating Google Maps Autocomplete into a React project has always been furstrating. The implementation differs by projects and things like styling and API integration often requires complex workarounds. autocompletecn handles all of this, making the autocomplete integration seamless and easy.
Autocompletecn component is built on top of BaseUI, so it can be drop-in in your shadcn/ui ecosystem without headache.
Ways to use
autocompletecn gives you two main options depending on your needs:
- Autocomplete component— A fully styled, accessible and compliant autocomplete component, following your shadcn/ui style, easily integrated with react-hook-form.
- useAutocomplete hook— Just the logic. Get suggestions, place details, and session token management without any UI. Build your own custom autocomplete experience on top of it.
Features
Quick Setup
Install with a single shadcn CLI command. Works with any project that has shadcn/ui set up.
Composable
Use the full component or just the hook for complete control over the UI.
Accessible
Full keyboard navigation, ARIA attributes, and screen reader support.
Google Places API
Powered by the Google Maps Places API with session tokens and debounced requests.