Not affiliated with official shadcn/ui. Visit ui.shadcn.com for official docs.
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
Looking to implement shadcn/ui patterns?
Join our Discord community for help from other developers.
Text-only alerts lack visual urgency and scannability. This React pattern shows Item with ItemMedia using variant icon containing ShieldAlertIcon, ItemTitle Security Alert, ItemDescription, and ItemActions Review button—creates visually distinct alert entry. Built with shadcn/ui Item components, Lucide React icon, and outline variant, it's perfect for security notifications, alert lists, warning messages, status updates, system notifications, or any list where leading icon provides visual categorization and urgency indication improving recognition speed.
New login detected from unknown device.
Pattern created by @haydenbleasel
Installation
Related patterns you will also like
Item with Avatar
Item with user avatar media
Item with Image
Item with image thumbnail
Item with Media Icon
Item with BadgeCheckIcon
Alert Component
Alert with icon and content
Notification List
List of notification items
Icon Badge
Badge with icon
Questions you might have
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
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