Feedback

Notification Center

A notification feed with read/unread state, per-type icons (info, success, warning, error), mark-as-read, mark-all-read, and dismiss actions.

Notifications

Deployment succeeded

Production v2.4.0 is live.

3 min ago

High memory usage

Server memory exceeded 80% for 5 minutes.

45 min ago

New team member

Bob Chen joined the workspace.

2 hr ago

Payment failed

Your card ending in 4242 was declined.

1 day ago

import { NotificationCenter } from "@aetherstack/blocks"

Installation

terminal

npx aether-ui add notification-center

Import

import.tsx

import { NotificationCenter } from "@aetherstack/blocks"

Usage

notification-center.tsx

import { NotificationCenter } from "@aetherstack/blocks"
import type { NotificationEntry } from "@aetherstack/blocks"

const notifications: NotificationEntry[] = [
  {
    id: "1",
    title: "Deployment succeeded",
    description: "Production v2.4.0 is live.",
    timestamp: new Date(),
    type: "success",
    read: false,
  },
]

export default function NotificationsPage() {
  return (
    <NotificationCenter
      notifications={notifications}
      onMarkRead={(id) => markRead(id)}
      onMarkAllRead={() => markAllRead()}
      onDismiss={(id) => dismiss(id)}
    />
  )
}

Props

Prop	Type	Default	Description
notifications	NotificationEntry[]	—	List of notifications. Each has id, title, optional description, timestamp, read state, and type.
onMarkRead	(id: string) => void	—	Called when the user marks a single notification as read.
onMarkAllRead	() => void	—	Called when the user clicks 'Mark all read'.
onDismiss	(id: string) => void	—	Called when the user dismisses a notification.
className	string	—	Additional classes on the wrapper.

* Required

Accessibility

→Unread notifications are visually distinguished with a dot indicator and background tint.
→Each action button (mark read, dismiss) has an aria-label describing its target notification.
→Timestamps use human-readable relative text (e.g. "3 min ago").