Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Item with Header
Item components with ItemHeader containing images in 3-column grid layout displaying model cards built with shadcn/ui Item and ItemGroup
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Everyday tasks and UI generation.
Advanced thinking or reasoning.
Open Source model for everyone.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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
Questions you might have
React Item Group
Item components grouped together with ItemSeparator dividers creating visually connected user list built with shadcn/ui ItemGroup and Fragment
React 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