Shadcn.io is not affiliated with official shadcn/ui
Item with Header
Item components with ItemHeader containing images in 3-column grid layout displaying model cards built with shadcn/ui Item and ItemGroup
Cards need header images—product photos, thumbnails, or banners. This React pattern uses ItemHeader wrapping img element with aspect ratio, ItemContent below for title and description, ItemGroup with grid layout creating 3-column card grid. Built with shadcn/ui Item components with outline variant, ItemHeader for media section, grid-cols-3 layout, and aspect-3/2 images maintaining consistent proportions, it's perfect for product grids, model galleries, article previews, portfolio items, or any card layout where header images provide visual context before text content.
Item with Header preview
Installation
Related Components
Item Group
Grouped items with separators
Item Sizes
Item sizing variations
Standard Card
Card component patterns
Item as Link
Clickable item links
Aspect Ratio
Consistent image proportions
Item in Dropdown
Item within dropdown menu
FAQ
Was this page helpful?
Sign in to leave feedback.
Item Group
Item components grouped together with ItemSeparator dividers creating visually connected user list built with shadcn/ui ItemGroup and Fragment
Item with Icon Media
A React list item with ItemMedia icon variant showing ShieldAlertIcon, security alert title, description, and review button built with shadcn/ui Item