Shadcn UI Crud Companies Block
CompaniesDetail1 displays a table of companies with clickable rows that open a slide-out sheet showing detailed information. The table shows company name, description, and location columns. The detail sheet displays company logo, name, description, and a list of attributes with icons including owner, location, website, categories, and notes.
Light background with a bordered table using standard shadcn styling. The detail sheet slides in from the right with a header showing company logo and name. Attribute rows use icons on the left with labels and values. Category badges use secondary styling. Clean spacing with clear visual hierarchy.
This is a master-detail pattern common in CRM and database applications. The sheet provides a quick preview without leaving the list context. Moderate complexity with the main interactivity being the row click to sheet transition.
Dependencies
| Package | Type |
|---|---|
| lucide-react | NPM |
| react | NPM |
badge @shadcn | Registry |
sheet @shadcn | Registry |
table @shadcn | Registry |