> ## Documentation Index
> Fetch the complete documentation index at: https://docs.sublay.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Notification Control Overview

> Dropdown notification bell control for real-time app notifications

# Notification Control

A dropdown notification control component for displaying real-time application notifications. Think GitHub, LinkedIn, or Facebook's notification bell — shows an unread count and displays a notification list when clicked.

***

## Key Features

<CardGroup cols={2}>
  <Card title="Real-Time Updates" icon="bolt">
    Automatic real-time updates when new notifications arrive.
  </Card>

  <Card title="Smart Positioning" icon="location-arrow">
    Dropdown automatically positions itself to stay within viewport bounds. Never overflows screen edges.
  </Card>

  <Card title="Infinite Scroll" icon="arrows-down-to-line">
    Load more notifications on demand. Starts with 10, loads more as needed.
  </Card>

  <Card title="Mark as Read" icon="check">
    Click to mark individual notifications as read, or use "Mark all read" for bulk actions.
  </Card>

  <Card title="Unread Badge" icon="circle-dot">
    Shows unread count on the trigger component. Updates automatically in real-time.
  </Card>

  <Card title="Theme Support" icon="palette">
    Full light/dark/auto mode support with both inline styles and Tailwind variants.
  </Card>
</CardGroup>

***

## What It's NOT

<Warning>
  This is **not** a full-page notifications center or inbox. It's a dropdown control component designed for navigation bars and headers.

  For a full notifications page, use the `useAppNotifications` hook from `@sublay/react-js` to build a custom interface.
</Warning>

***

## Use Cases

**Perfect for:**

* Navigation bar notification bells
* Header dropdown notifications
* Real-time notification alerts
* Social media style notification systems
* SaaS dashboard notifications

**File Complexity:** Only **5 files** — much simpler than comment components.

***

## Notification Types Supported

| Type | Icon | Trigger |
| - | - | - |
| `system` | Wrench | System announcements |
| `entity-comment` | MessageCircle | New comment on entity |
| `comment-reply` | MessageSquare | Reply to your comment |
| `entity-mention` | @ | Mentioned in entity |
| `comment-mention` | @ | Mentioned in comment |
| `entity-upvote` | Heart | Upvote on entity |
| `comment-upvote` | Heart | Upvote on comment |
| `new-follow` | UserPlus | New follower |
| `connection-accepted` | UserPlus | Connection accepted |
| `connection-request` | UserPlus | Connection request |

Icons are from **lucide-react**.

***

## Platform Support

| Platform | Status |
| - | - |
| React (Web) | ✅ Fully supported |
| React Native | ❌ Not available |
| Expo | ❌ Not available |

***

## Required Dependencies

```json theme={null}
{
  "dependencies": {
    "@sublay/react-js": "^7.0.0",
    "framer-motion": "^12.0.0",
    "lucide-react": "^1.0.0"
  }
}
```

The CLI checks for these and offers to install them automatically.

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Installation" icon="download" href="/v7/components/components/notifications/installation">
    Add notification control to your project
  </Card>

  <Card title="Props & API" icon="sliders" href="/v7/components/components/notifications/props-api">
    Learn about component props
  </Card>

  <Card title="Customization" icon="paintbrush" href="/v7/components/components/notifications/customization">
    Customize colors, layout, and behavior
  </Card>

  <Card title="Integration Examples" icon="code" href="/v7/components/components/notifications/integration-examples">
    See real-world integration examples
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.