# Notification List

> Overlays in Twentyfirst UI.

Component · Overlays · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/NotificationList/)

## Example

```tsx
import { NotificationList } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div
      style={{
        width: 380,
        boxSizing: "border-box",
        maxWidth: "100%",
        background: "var(--surface)",
        borderRadius: "var(--radius-lg)",
        padding: 8,
        boxShadow: "var(--shadow-float)",
      }}
    >
      <NotificationList
        items={[
          {
            id: 1,
            icon: "bot",
            tint: "lilac",
            title: "Atlas needs your approval",
            text: "4 reply drafts are waiting",
            time: "07:55",
            unread: true,
          },
          {
            id: 2,
            icon: "flag",
            tint: "blush",
            title: "Invoice #2041 is overdue",
            text: "Harbor & Co · €860",
            time: "07:30",
            unread: true,
          },
          {
            id: 3,
            icon: "zap",
            tint: "mint",
            title: "halo-web is live",
            text: "Add seat selector to checkout",
            time: "Yesterday",
          },
          {
            id: 4,
            icon: "users",
            tint: "sky",
            title: "Ava Brandt joined",
            text: "Invited as Viewer",
            time: "Mon",
          },
        ]}
      />
    </div>
  );
}
```

## Props

### NotificationList

| Prop | Type | Notes |
| --- | --- | --- |
| `items` | `NotificationItem[]` | Required |
| `onOpen?` | `(n: NotificationItem) => void` |  |
| `onReadAll?` | `() => void` |  |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |