React Dialog Block Contact Picker

Select contacts from an organized searchable list. This React contact picker dialog provides searchable contact list with instant filtering, multi-select with checkboxes for bulk selection, recent contacts section for quick access, and alphabetical grouping for easy navigation. Built with shadcn/ui Dialog, Command, Checkbox, Avatar, Button, and Badge components using Tailwind CSS, users find and select contacts efficiently. Search, browse, select multiple—perfect for messaging apps, email compose, file sharing, event invites, or any Next.js application requiring contact selection with powerful search and organization.

React Dialog Block Contact Picker preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/dialog-contact-picker.json

npx shadcn@latest add https://www.shadcn.io/registry/dialog-contact-picker.json

pnpm dlx shadcn@latest add https://www.shadcn.io/registry/dialog-contact-picker.json

bunx shadcn@latest add https://www.shadcn.io/registry/dialog-contact-picker.json

Related Components

FAQ