👋 This is a community-driven shadcn/ui resource. For the official documentation, visit ui.shadcn.com
Manage Relationships
CRUD relationship manager for linking records with search, selection, and management of foreign key associations and many-to-many relationships
Looking to implement shadcn/ui blocks?
Join our Discord community for help from other developers.
Managing relationships between records shouldn't require SQL knowledge. This React CRUD interface displays current related records with badges, search dialog to find and link new associations, drag-and-drop reordering, and remove buttons. Built with shadcn/ui Dialog, Input, Command components with autocomplete search and visual relationship indicators, users can manage product categories, user teams, post tags, or order items. One-to-many, many-to-many support, and cascade options—perfect for admin panels, CRM systems, or content management where complex data relationships need intuitive management interfaces.
Installation
npx shadcn@latest add https://www.shadcn.io/registry/crud-relationships-01.jsonnpx shadcn@latest add https://www.shadcn.io/registry/crud-relationships-01.jsonpnpm dlx shadcn@latest add https://www.shadcn.io/registry/crud-relationships-01.jsonbunx shadcn@latest add https://www.shadcn.io/registry/crud-relationships-01.jsonRelated blocks you will also like
Edit Product Form
CRUD form for product inventory
Product Detail View
Comprehensive detail view with tabs
User List Management
User list with search and actions
Create Blog Post
Form for creating new content
Advanced Filters
Complex filtering interface
Data Table
Table with sorting and filtering