# Notification list (goodtabs UI)

A list of notifications with unread marks that never rely on colour alone.

## Install

```bash
npx shadcn@latest add https://ui.goodtabs.co/r/notification-list.json
```

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/notification-list`

## Usage

```tsx
import { NotificationList } from "@/components/ui/notification-list"

<NotificationList items={items} onItemSelect={markRead} />
```

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `{ id: string; title: string; body?: string; time: string; read: boolean }[]` |  | The notifications, newest first. |
| onItemSelect | `(id: string) => void` |  | When set, each row is a button that calls this with its id. |

## When to use

- An inbox or activity panel inside a popover, sheet or page
- Any list where some rows are new and the rest are not

## When not to use

- Transient confirmations, which belong in a toast
- Long feeds that need grouping, filters or infinite loading

## Notes for agents

- Unread is three signals at once: a brand dot, a medium weight title and hidden text reading Unread
- The dot is the only use of brand; titles and times stay in foreground tones
- Passing onItemSelect from a server component fails; use it from a client component
- Times are plain strings, format them yourself

Docs: https://ui.goodtabs.co/components/notification-list