Lucent UI
← PricingTableNotificationFeedOnboardingFlow →
✦ LLM-ready

NotificationFeed

pattern

Notification list with read/unread states, type chips, and icon action buttons. Composes Card, Stack, Row, Text, Chip, Avatar, Button, and Tooltip for a production-ready notification feed.

"Build a NotificationFeed pattern from lucent-ui. Use Card with accent-subtle background for unread items, Avatar, Text for title and timestamp, and Chip for notification type."

Usage

React / JSX
import { Card, Stack, Row, Text, Chip, Avatar, Button, Tooltip } from 'lucent-ui'

<NotificationFeed />

Installation

pnpm add lucent-ui

API Reference

NotificationFeed props — * required

PropTypeDefaultDescription
Cardcomponent—Container for each notification — accent-subtle background for unread.
Avatarcomponent—Sender avatar.
Textcomponent—Notification title and timestamp.
Chipcomponent—Notification type label (Comment, Mention, Update).
Buttoncomponent—Action buttons (mark read, archive).
Tooltipcomponent—Tooltips on icon action buttons.