NotificationItem

A list item for notification feeds. Shows an icon, title, description, timestamp, and an optional unread indicator dot. The unread state applies a subtle primary tint to the background.

Anatomy

A flex row with a rounded icon container on the left and a text block on the right. The text block stacks title + unread dot, description, and timestamp vertically.

New comment on your post

Sarah left a comment: 'Great article!'

2 min ago

Read vs Unread

The unread prop applies a primary tint to the background and icon container, bolds the title, and shows a status dot.

Unread

New comment on your post

Sarah left a comment: 'Great article!'

2 min ago

Read

Payment received

You received $250.00 from Acme Corp.

Yesterday

Notification Feed

Stack multiple NotificationItems directly — no additional wrapper needed. Each item has its own border.

New comment on your post

Sarah left a comment: 'Great article!'

2 min ago

Security alert

A new device logged into your account.

1 hour ago

Payment received

You received $250.00 from Acme Corp.

Yesterday

Profile updated

Your profile photo was changed successfully.

2 days ago

Shipment delivered

Your order #4521 has been delivered.

3 days ago

In a Notification Panel

Wrap the feed in a Card or popover panel with a header for a complete notification center.

Notifications

Mark all read

Action required

Your subscription will expire in 3 days.

Just now

New follower

@david started following you.

5 min ago

Invoice paid

Invoice #INV-0024 has been paid.

1 day ago

Design Guidelines

Do

  • Sort unread items to the top. Visual priority should match reading priority — unread first, oldest read last.
  • Use contextual icons. The icon should immediately communicate the notification category without reading the text.
  • Keep description under two lines. Notifications are scanned, not read — truncate long descriptions.

Don't

  • Don't show more than 20 items without pagination. Infinite notification lists create an unusable interface.
  • Don't use the same icon for every notification. Identical icons eliminate the quick-scan benefit of the icon column.
  • Don't use vague titles. "You have a notification" is unhelpful — describe the event specifically.

Developer Reference

Props

  • icon (required) — a LucideIcon shown in the leading circle container.
  • title (required) — short notification title. Bold when unread is true.
  • description (required) — supporting detail text, shown in muted foreground.
  • time (required) — relative or absolute timestamp string.
  • unread (optional, default: false) — applies primary tint to background and icon, shows status dot, bolds title.
  • className — forwarded to the root container. Use rounded-none border-0 for panel usage without individual card borders.

Usage

import { OriginUiNotificationItem } from "@/components/branding/origin-ui-notification-item"
import { Bell, Shield, CreditCard } from "lucide-react"

<OriginUiNotificationItem
  icon={Bell}
  title="New comment on your post"
  description="Sarah left a comment: 'Great article!'"
  time="2 min ago"
  unread
/>

<OriginUiNotificationItem
  icon={Shield}
  title="Security alert"
  description="A new device logged into your account."
  time="1 hour ago"
  unread
/>

<OriginUiNotificationItem
  icon={CreditCard}
  title="Payment received"
  description="You received $250.00 from Acme Corp."
  time="Yesterday"
/>