Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
React 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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
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.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
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
Questions you might have
React Basic Item
A React list item component with title, description, and action button using shadcn/ui Item with outline variant and ItemActions
React kbd - Arrow Keys Cross Pattern
Arrow key Kbd components arranged in inverted-T cross pattern layout using CSS grid with arrow symbols built with shadcn/ui Kbd