Notifications
Notification centers, inbox views, activity timelines, and notification preferences.
Notification Center
Dropdown notification center with unread count and mark-all-read action.
import { NotificationCenter } from "@launchapp/design-system/blocks/notifications";const notifications = [ { id: "1", title: "New comment", description: "Alice commented on your post.", timestamp: "5m ago", read: false }, { id: "2", title: "Payment received", description: "$49 payment processed.", timestamp: "1h ago", read: true },];export default function Page() { return ( <NotificationCenter notifications={notifications} onRead={(id) => console.log("read", id)} onReadAll={() => console.log("read all")} /> );}Inbox View
Full inbox layout with notification list, filters, and bulk actions.
Inbox
import { InboxView } from "@launchapp/design-system/blocks/notifications";const notifications = [ { id: "1", title: "New comment", description: "Alice replied to your thread.", timestamp: "5m ago", read: false, type: "comment" }, { id: "2", title: "Mention", description: "Bob mentioned you in a post.", timestamp: "1h ago", read: false, type: "mention" },];export default function Page() { return ( <InboxView notifications={notifications} onRead={(id) => console.log("read", id)} onDelete={(id) => console.log("delete", id)} /> );}Activity Timeline
Vertical timeline of recent activity events with icons and timestamps.
Recent Activity
Project created
You created 'LaunchApp v2'
Member added
Alice joined the team
PR merged
feat(docs): update component library
import { ActivityTimeline } from "@launchapp/design-system/blocks/notifications";const events = [ { id: "1", title: "Project created", description: "You created 'LaunchApp v2'", timestamp: "2024-01-01T10:00:00Z", type: "create" }, { id: "2", title: "Member added", description: "Alice joined the team", timestamp: "2024-01-02T09:00:00Z", type: "user" },];export default function Page() { return <ActivityTimeline events={events} />;}Notification Bell
Bell icon button with unread badge that opens a notification popover.
import { NotificationBell } from "@launchapp/design-system/blocks/notifications";export default function Page() { return ( <NotificationBell count={3} notifications={[ { id: "1", title: "New message", read: false, timestamp: "now" }, ]} onRead={(id) => console.log("read", id)} /> );}Notification Preferences
Settings panel for toggling email, push, and in-app notification preferences.
Notification preferences
Choose how and when you want to be notified.
Enable all notifications
Turn on all notification channels across all categories.
Product updates
News about features, improvements, and product changes.
Receive updates via email
Browser and mobile push notifications
Show within the application
Account activity
Security alerts, sign-ins, and important account changes.
Receive alerts via email
Browser and mobile push notifications
Text messages to your phone
Social activity
Mentions, comments, and interactions from other users.
Receive social notifications via email
Browser and mobile push notifications
Show within the application
Marketing & promotions
Special offers, tips, and promotional content.
Marketing emails and newsletters
Promotional push notifications
import { NotificationPreferences } from "@launchapp/design-system/blocks/notifications";const preferences = [ { id: "email_comments", label: "Comments", description: "Email when someone comments", channel: "email", enabled: true }, { id: "push_mentions", label: "Mentions", description: "Push when mentioned", channel: "push", enabled: false },];export default function Page() { return ( <NotificationPreferences preferences={preferences} onToggle={(id, enabled) => console.log(id, enabled)} /> );}Feedback Widget
In-app feedback form with rating, categories, and optional email capture.
How are we doing?
import { FeedbackWidget } from "@launchapp/design-system/blocks/notifications";export default function Page() { return ( <FeedbackWidget variant="inline" title="How are we doing?" categories={[ { id: "bug", label: "Bug Report" }, { id: "feature", label: "Feature Request" }, { id: "general", label: "General" }, ]} onSubmit={(feedback) => console.log("feedback", feedback)} /> );}Inbox Manager
Full inbox layout with folder tree, message list, and message detail panel.
Folders
Inbox
import { InboxManager } from "@launchapp/design-system/blocks/inbox";const messages = [ { id: "1", subject: "New comment on your post", from: { name: "Alice Johnson", email: "alice@example.com", initials: "AJ" }, preview: "Left a review on the design tokens RFC...", date: "2024-01-15T10:00:00Z", read: false, starred: false, labels: ["design"] }, { id: "2", subject: "PR #42 merged", from: { name: "Bob Smith", email: "bob@example.com", initials: "BS" }, preview: "feat(auth): add OAuth providers", date: "2024-01-14T09:00:00Z", read: true, starred: true, labels: ["engineering"] },];export default function Page() { return ( <InboxManager messages={messages} onMessageSelect={(msg) => console.log("select", msg.id)} onMessageArchive={(id) => console.log("archive", id)} onMarkAllRead={() => console.log("mark all read")} /> );}Activity Timeline
Vertical timeline of activity events with icons, titles, descriptions, and timestamps.
Recent Activity
Project created
You created 'LaunchApp v2'
Member added
Alice joined the team
PR merged
feat(docs): update component library
import { ActivityTimeline } from "@launchapp/design-system/blocks/notifications";export default function Page() { return ( <ActivityTimeline title="Recent Activity" items={[ { id: "1", title: "Project created", description: "You created 'LaunchApp v2'", timestamp: "2024-01-01T10:00:00Z" }, { id: "2", title: "Member added", description: "Alice joined the team", timestamp: "2024-01-02T09:00:00Z" }, { id: "3", title: "PR merged", description: "feat(docs): update component library", timestamp: "2024-01-03T14:30:00Z" }, ]} /> );}Notification Bell
Icon button with unread badge that opens a notification dropdown list.
import { NotificationBell } from "@launchapp/design-system/blocks/notifications";export default function Page() { return ( <NotificationBell notifications={[ { id: "1", title: "New comment", timestamp: "5m ago", read: false, description: "Alice commented on your post." }, { id: "2", title: "Payment received", timestamp: "1h ago", read: false, description: "$49 payment processed." }, { id: "3", title: "Team invite", timestamp: "2h ago", read: true, description: "Bob joined your workspace." }, ]} badgeCount={2} onRead={(id) => console.log("read", id)} onReadAll={() => console.log("read all")} /> );}