Shadcn.io is not affiliated with official shadcn/ui
Item Sizes
Item components in default and small sizes showing title, description, media, and actions with shadcn/ui Item size variants
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.
Item Sizes preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
Item in Dropdown
Item components within DropdownMenu displaying user selection list with avatars built using shadcn/ui Item, DropdownMenu, and Avatar
Item Group
Item components grouped together with ItemSeparator dividers creating visually connected user list built with shadcn/ui ItemGroup and Fragment