Shadcn.io is not affiliated with official shadcn/ui
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
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.
Item with Image Media preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.