# Notifications

> Leading icon, title with an unread dot indicator, and a trailing timestamp.

A shadcn/ui block from the [@flx](https://ui.flexnative.com) registry, listed on [shadcn.exchange](https://shadcn.exchange/r/flx/item-13).

- Page, with a live preview: https://shadcn.exchange/r/flx/item-13
- Screenshot: https://abzjhwgwpdpz7ua5.public.blob.vercel-storage.com/shots/flx/item-13-light-f81848af745f3c76.png
- Registry item: https://ui.flexnative.com/r/item-13.json
- Listed: 2026-10-13, source last changed 2026-10-13

## Install

```bash
npx shadcn@latest add https://ui.flexnative.com/r/item-13.json
```

Run it in a project that has shadcn/ui set up. It adds the files below and installs what they depend on.

## Dependencies

- Registry items: `item`

## Files

### `registry/patterns/item/item-13.tsx`

```tsx
import {
  Item,
  ItemContent,
  ItemDescription,
  ItemFooter,
  ItemGroup,
  ItemMedia,
  ItemTitle,
} from '@/components/ui/item'
import { AtSignIcon, GitPullRequestIcon, MessageSquareIcon } from 'lucide-react'

const notifications = [
  {
    icon: GitPullRequestIcon,
    title: 'Marcus requested review',
    description: 'PR #482 · Refactor billing module',
    time: '2m ago',
    unread: true,
  },
  {
    icon: AtSignIcon,
    title: 'Sarah mentioned you',
    description: '"Can you take a look at the spec?"',
    time: '1h ago',
    unread: true,
  },
  {
    icon: MessageSquareIcon,
    title: 'New comment on RFC-12',
    description: 'Priya: "+1 on the staged rollout plan."',
    time: 'Yesterday',
    unread: false,
  },
]

export function Item13() {
  return (
    <ItemGroup className="w-full max-w-md">
      {notifications.map((n) => (
        <Item key={n.title} variant="outline">
          <ItemMedia variant="icon">
            <n.icon />
          </ItemMedia>
          <ItemContent>
            <ItemTitle>
              {n.title}
              {n.unread && (
                <span
                  aria-label="Unread"
                  className="bg-primary inline-block size-1.5 rounded-full"
                />
              )}
            </ItemTitle>
            <ItemDescription>{n.description}</ItemDescription>
          </ItemContent>
          <ItemFooter className="basis-auto">
            <span className="text-muted-foreground text-xs">{n.time}</span>
          </ItemFooter>
        </Item>
      ))}
    </ItemGroup>
  )
}
```