Shadcn.io is not affiliated with official shadcn/ui
Item Group
Item components grouped together with ItemSeparator dividers creating visually connected user list built with shadcn/ui ItemGroup and Fragment
Related list items need visual grouping—separators distinguish without gaps. This React pattern wraps Items in ItemGroup, uses Fragment and map with ItemSeparator between items creating cohesive list with divider lines. Built with shadcn/ui Item components, ItemGroup container, ItemSeparator for dividers, Avatar for user photos, and conditional separator rendering excluding last item, it's perfect for user lists, settings groups, menu sections, contact lists, or any collection where visual grouping and separation improves scannability and organization.
Item Group preview
Installation
Related Components
Item Sizes
Item sizing variations
Item as Link
Clickable item links
Item with Header
Item with image header
Standard Avatar
Avatar component patterns
Item in Dropdown
Item within dropdown menu
Separator
Divider component
FAQ
Was this page helpful?
Sign in to leave feedback.