Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React Item with Image Media
A React music list using ItemGroup with clickable Items showing album art in ItemMedia image variant, song titles, artists, and duration built with shadcn/ui
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Text-only media lists lack visual appeal and recognition. This React pattern shows ItemGroup containing mapped clickable Items with ItemMedia using variant image for album art, ItemTitle with song and album, ItemDescription artist, and additional ItemContent showing duration—creates rich media list. Built with shadcn/ui Item components, asChild anchor pattern, and grayscale image filter, it's perfect for music playlists, video lists, podcast episodes, product catalogs, gallery items, or any media content where thumbnail images aid recognition and browsing.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Item with Icon Media
Item with icon variant
Item with Avatar
Item with user avatar
Basic Item
Item with title and description
Card with Image
Card with image media
List Item
Simple list pattern
Product List
Product catalog list
Questions you might have
React Item with Avatar
A React user list item with Avatar in ItemMedia, name title, last seen description, and Plus icon invite button built with shadcn/ui Item
React Basic Item
A React list item component with title, description, and action button using shadcn/ui Item with outline variant and ItemActions