Shadcn.io is not affiliated with official shadcn/ui
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
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.
Item with Icon Media preview
Installation
Related Components
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
FAQ
Was this page helpful?
Sign in to leave feedback.
Item with Header
Item components with ItemHeader containing images in 3-column grid layout displaying model cards built with shadcn/ui Item and ItemGroup
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