Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Item Sizes
Item components in default and small sizes showing title, description, media, and actions with shadcn/ui Item size variants
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
List items need size flexibility—default for detailed content, small for compact lists. This React pattern shows Item with default size including ItemDescription and Button, and size sm variant with icon and ChevronRight using asChild for link—demonstrating size prop controlling spacing and density. Built with shadcn/ui Item components with size variants, Lucide React icons, and outline variant, it's perfect for mixed-density layouts, responsive lists, settings panels requiring compact rows, or any interface where varying information density optimizes space and hierarchy.
A simple item with title and description.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Item Group
Grouped items with separators
Item as Link
Clickable item links
Item with Header
Item with image header
Item in Dropdown
Item within dropdown menu
Standard Button
Button size variants
Standard Card
Card component patterns
Questions you might have
React Item in Dropdown
Item components within DropdownMenu displaying user selection list with avatars built using shadcn/ui Item, DropdownMenu, and Avatar
React Item Group
Item components grouped together with ItemSeparator dividers creating visually connected user list built with shadcn/ui ItemGroup and Fragment