# Notifications Panel
URL: /docs/web/components/notifications-panel

Notifications Panel component with multiple variants and sizes.

**Demo:**

```tsx
'use client';

import { useState } from 'react';

import { NotificationsPanel } from '@docyrus/ui/components/notifications-panel';
import {
  MessageSquare, Receipt, Rocket, Info, Check, X, ArrowUpRight, ArrowRight
} from 'lucide-react';

export function NotificationsPanelDemo() {
  const [activeTab, setActiveTab] = useState<'all' | 'requests' | 'mentioned'>('all');

  const allNotifications = [
    {
      id: '1',
      type: 'comment' as const,
      variant: 'default' as const,
      icon: 'OA',
      badge: ,
      title: (
        <>
          Oğuz Aksu <span className="font-normal text-muted-foreground">commented on</span> Google
        </>
      ),
      content: (
        <div className="bg-muted p-2 rounded-md border border-border italic">
          "We need to follow up on the Q3 expansion plans before the next board meeting. Can you check the latest financials?"
        </div>
      ),
      timestamp: '2m ago',
      actions: [
        { label: 'Reply', variant: 'default' as const },
        {
          label: 'View Google',
          variant: 'link' as const,
          icon: 
        }
      ]
    },
    {
      id: '2',
      type: 'approval' as const,
      variant: 'unread' as const,
      icon: ,
      title: 'Expense Approval for Q3 Travel',
      subtitle: (
        <>
          Requested by <span className="font-medium text-foreground">Sarah Jenkins</span> • $1,240.50
        </>
      ),
      timestamp: '1h ago',
      showUnreadIndicator: true,
      actions: [
        {
          label: 'Approve',
          variant: 'primary' as const,
          icon: 
        },
        {
          label: 'Deny',
          variant: 'danger' as const,
          icon: 
        }
      ]
    },
    {
      id: '3',
      type: 'status' as const,
      variant: 'default' as const,
      icon: ,
      title: 'Update status for Project Apollo',
      subtitle: 'Weekly check-in required for ongoing enterprise deal.',
      timestamp: '3h ago',
      actions: [
        { label: 'Update Status', variant: 'default' as const },
        {
          label: 'View Project',
          variant: 'link' as const,
          icon: 
        }
      ]
    },
    {
      id: '4',
      type: 'info' as const,
      variant: 'default' as const,
      icon: ,
      title: 'Welcome to the new workspace',
      subtitle: "We've updated the dashboard to help you track your leads more efficiently. Take a quick tour to see what's new.",
      timestamp: '1d ago'
    }
  ];

  const filteredNotifications = allNotifications.filter((notification) => {
    if (activeTab === 'requests') {
      return notification.type === 'approval' || notification.type === 'status';
    }
    if (activeTab === 'mentioned') {
      return notification.type === 'comment';
    }

    return true;
  });

  const tabs = [
    {
      label: 'All Notifications',
      count: allNotifications.length,
      active: activeTab === 'all',
      onClick: () => setActiveTab('all')
    },
    {
      label: 'Requests',
      count: allNotifications.filter(n => n.type === 'approval' || n.type === 'status').length,
      active: activeTab === 'requests',
      onClick: () => setActiveTab('requests')
    },
    {
      label: 'Mentioned',
      count: allNotifications.filter(n => n.type === 'comment').length,
      active: activeTab === 'mentioned',
      onClick: () => setActiveTab('mentioned')
    }
  ];

  return (

    <NotificationsPanel
      title="Notifications"
      headerAction={
        <button className="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-muted-foreground bg-card border border-border rounded-md hover:bg-muted/50 hover:text-foreground transition-colors shadow-sm">
          
          Mark all as read
        </button>
      }
      tabs={tabs}
      notifications={filteredNotifications}
      footer={
        <button className="text-xs font-medium text-muted-foreground hover:text-foreground transition-colors flex items-center gap-1">
          Load older notifications
          <svg className="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 9l-7 7-7-7" />
          </svg>
        </button>
      }
      onNotificationAction={(id, action) => {
        console.info(`Notification ${id}: ${action}`);
      }} />

  );
}
```

## Installation

```bash
pnpm dlx @docyrus/cli add @docyrus/ui-notifications-panel
```

**Dependencies:**
- [class-variance-authority](https://www.npmjs.com/package/class-variance-authority)

## Usage

```tsx
import {
  NotificationsPanel
} from "@docyrus/ui/components/notifications-panel";

<NotificationsPanel
  variant="default"
  size="sm"
  ref={...}
  title="Notifications"
  headerAction={...}
  tabs={...}
  label="..."
  count={0}
  active
  onClick={() => {}}
  notifications={NotificationItem[]}
  footer={...}
  onNotificationAction={() => {}}
/>
```

## Variants

| Variant | Description |
|---------|-------------|
| `default` | Default style |
| `elevated` | Elevated — `shadow-md` |

## Sizes

| Size | Description |
|------|-------------|
| `sm` | Small — `max-w-sm` |
| `default` | Default — `max-w-md` |
| `lg` | Large — `max-w-lg` |
| `full` | full — `w-full` |

## API Reference

| Prop | Type | Default |
|------|------|---------|
| `variant` | `"default"` \| `"elevated"` | `"default"` |
| `size` | `"sm"` \| `"default"` \| `"lg"` \| `"full"` | `"default"` |
| `ref` | `Ref<HTMLDivElement>` | — |
| `title` | `string` | `'Notifications'` |
| `headerAction` | `ReactNode` | — |
| `tabs` | `unknown` | — |
| `label` | `string` | — |
| `count` | `number` | — |
| `active` | `boolean` | — |
| `onClick` | `() => void` | — |
| `notifications` | `Array<NotificationItem>` | — |
| `footer` | `ReactNode` | — |
| `onNotificationAction` | `(notificationId: string, action: string) => void` | — |
| `className` | `string` | — |