Shadcn.io is not affiliated with official shadcn/ui
Item with Media and Icon
A React clickable list item with BadgeCheckIcon media, title, and ChevronRightIcon using asChild anchor and size-sm built with shadcn/ui Item
Icon-only text lacks visual hierarchy and discoverability. This React pattern shows Item as clickable anchor using asChild with ItemMedia showing BadgeCheckIcon, ItemTitle text, and ItemActions with ChevronRightIcon—creates clear navigable list entry. Built with shadcn/ui Item with size-sm, outline variant, and Lucide React icons, it's perfect for notification lists, status messages, settings navigation, success confirmations, feature announcements, or any list where leading icon indicates category and trailing chevron signals clickability.
Item with Media and Icon preview
Installation
Related Components
Basic Item
Item with description and button
List Item
Simple list item pattern
Navigation List
Clickable navigation items
Alert Component
Alert with icon and content
Icon Button
Button with icon
Badge Component
Status badge indicator
FAQ
Was this page helpful?
Sign in to leave feedback.