Notification
Rows for notification lists and activity feeds.
Sarah commented on your case study
2 minutes ago
RP
Raj approved the design review
1 hour ago
Install
npx shadcn@latest add https://plinth.dhrumilkherde.com/r/notification.jsonUsage
Compose the leading slot freely: an unread dot, an Avatar, or an icon.
import {
Notification, NotificationContent, NotificationTitle,
NotificationMeta, NotificationDot,
} from "@/components/ui/notification";
<Notification unread>
<NotificationDot />
<NotificationContent>
<NotificationTitle><b>Ana</b> mentioned you</NotificationTitle>
<NotificationMeta>5m ago</NotificationMeta>
</NotificationContent>
</Notification>Accessibility
- Rows are plain containers; if a row is clickable, wrap it in a link or button so keyboard users get a real target.
- The unread dot has
aria-label="Unread"; the tinted background alone never carries the meaning.