Customer Details 2 - Customer details editor

Pro

An app screen for editing a customer's account, contacts, billing, shipping, cards, and preferences.

Shadcn Customer Details 2 block

Component data

ID
customer-details2
Access
pro
Created
Sep 14, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Customer Details 2 block design & features

CustomerDetails2 is a full-page customer record editor built with Shadcn UI, opening on a prefilled edit view with sticky section navigation and a scrollable form column. Account starts selected. The sidebar items are anchor links to account, contacts, billing, shipping, saved cards, and preferences. Each section is a rounded card of inputs, selects, switches, and repeatable rows for contacts, addresses, and payment methods. Header and footer actions cover reset, draft, save, and cancel.

Surfaces use soft borders and light card shadows on a plain background. Section nav pills invert to foreground when active. Field labels are tiny uppercase tracks above rounded inputs. Density stays form-first with generous vertical gaps between cards.

The look is corporate-operational and closer to a CRM editor than a marketing form. What stands out is the scroll-spy navigation paired with repeatable contact, shipping, and card lists. Complexity is elaborate and content-driven: a real customer profile, addresses, cards, segments, and notes are required to fill the sections.

On smaller screens the sidebar becomes a horizontal chip scroller above the form, while the action buttons wrap under the heading.