React Dialog Block Add To Collection

Organize items into collections effortlessly. This React add to collection dialog provides a searchable list of existing collections, quick create new collection option, multi-select support for adding to multiple collections, and visual indicators for current membership. Built with shadcn/ui Dialog, Input, Checkbox, Button, and ScrollArea components using Tailwind CSS, users organize content efficiently with clear visual feedback. Search collections, select destinations, add items—perfect for bookmark managers, content libraries, playlist creators, or any Next.js application where users organize items into categorized collections.

React Dialog Block Add To Collection preview

Installation

npx shadcn@latest add https://www.shadcn.io/registry/dialog-add-to-collection.json

npx shadcn@latest add https://www.shadcn.io/registry/dialog-add-to-collection.json

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

bunx shadcn@latest add https://www.shadcn.io/registry/dialog-add-to-collection.json

Related Components

FAQ