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 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
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