Skip to main content

​
Notification Control

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

​
Overview

NotificationControl is a lightweight, customizable component that integrates into your navigation bar to display user notifications.
Notification Control Preview

​
Key Features

Real-Time Updates

Powered by Replyke’s notification system with automatic real-time updates when new notifications arrive.

Smart Positioning

Dropdown automatically positions itself to stay within viewport bounds. Never overflows screen edges.

Infinite Scroll

Load more notifications on demand. Starts with 10, loads more as needed.

Mark as Read

Click to mark individual notifications as read, or use “Mark all read” for bulk actions.

Unread Badge

Shows unread count on the trigger component. Updates automatically in real-time.

Theme Support

Full light/dark mode support with both inline styles and Tailwind variants.

​
What It’s NOT

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 @replyke/react-js to build your custom interface.

​
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:
  • 5 files total (much simpler than comment components)
  • Minimal state management
  • Easy to customize

​
Notification Types Supported

The component supports various notification types with appropriate icons:
TypeIconUse Case
systemWrenchSystem announcements
entity-commentMessageCircleNew comment on entity
comment-replyMessageSquareReply to your comment
entity-mention@Mentioned in entity
comment-mention@Mentioned in comment
entity-upvoteHeartUpvote on entity
comment-upvoteHeartUpvote on comment
new-followUserPlusNew follower
connection-acceptedUserPlusConnection accepted
connection-requestUserPlusConnection request
Icons are from lucide-react.

​
Platform Support

PlatformStatus
React (Web)✅ Fully supported
React Native⚠️ Coming soon
Expo⚠️ Coming soon

​
Styling Variants

Like all Replyke CLI components, NotificationControl comes in two styling options:
  • Inline Styles
  • Tailwind CSS
All styles as style={{}} objects with OKLCH color space.Features:
  • No CSS dependencies
  • Theme controlled via theme prop ("auto" | "light" | "dark")
  • Works everywhere
  • Better color accuracy with OKLCH
Example:
<NotificationControl
  theme="auto"  // or "light" | "dark"
  {...props}
/>
Choose your preference during npx @replyke/cli init.

​
Required Dependencies

{
  "dependencies": {
    "@replyke/react-js": "^6.0.0",
    "framer-motion": "^11.0.0",
    "lucide-react": "^0.400.0"
  }
}
Tailwind variant additionally requires: 
{
  "dependencies": {
    "clsx": "^2.0.0",
    "tailwind-merge": "^2.0.0"
  }
}
The CLI checks for these during installation.

​
Comparison with Comment Components

AspectNotificationControlComment Components
ComplexitySimple (5 files)Complex (25+ files)
PurposeDropdown bell notificationFull comment section
Main UseNavigation barPage content area
LayoutFlat listDeep threading
Bundle Size~15KB minified~80KB minified

​
Next Steps

Installation

Add notification control to your project

Props & API

Learn about component props

Customization

Customize colors, layout, and behavior

Integration Examples

See real-world integration examples