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.

Key Features

Real-Time Updates

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:

Type	Icon	Use Case
`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	⚠️ 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}
/>

Uses Tailwind utility classes for styling.Features:

Requires Tailwind CSS
Dark mode via dark: prefix
More concise code
Requires darkMode: 'class' in config

Example:

<html className={isDark ? 'dark' : ''}>
  <NotificationControl {...props} />
</html>

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

Aspect	NotificationControl	Comment Components
Complexity	Simple (5 files)	Complex (25+ files)
Purpose	Dropdown bell notification	Full comment section
Main Use	Navigation bar	Page content area
Layout	Flat list	Deep 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

Overview

Installation

Component Types

Threaded Comments

Social Comments