Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Item Group
Item components grouped together with ItemSeparator dividers creating visually connected user list built with shadcn/ui ItemGroup and Fragment
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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