@styloviz/notification-center

6 premium variants: dropdown, drawer, inline, activity feed, compact and grouped — with mark-as-read, dismiss, search, tab filtering and inline actions.

Part of the StyloViz UI Kit — a premium Angular 21 + Tailwind CSS 4 dashboard component library. Standalone, OnPush, strongly typed, dark-mode ready.

Installation

npm install @styloviz/notification-center

Requires @angular/core and @angular/common >= 21. Self-contained — no other StyloViz packages required. Prefer everything at once? @styloviz/all installs the whole free tier in one command.

Usage

import { SvNotificationCenterComponent } from '@styloviz/notification-center';

@Component({
  standalone: true,
  imports: [SvNotificationCenterComponent],
  template: `
    <sv-notification-center [notifications]="notifications" />
  `,
})
export class DemoComponent {}

Inputs

| Input | Type | Default | Description | | --- | --- | --- | --- | | variant | NotificationCenterVariant | 'dropdown' | Presentation: dropdown, drawer, inline, feed, compact or grouped. | | notifications | NotificationItem[] | [] | The notifications to display. | | maxHeight | string | '400px' | Max height of the scrollable list (CSS length). | | tabs | string[] | ['All', 'Unread', 'Mentions', 'System'] | Filter tab labels. | | panelTitle | string | 'Notifications' | Panel heading text. | | showSearch | boolean | true | Show the search box. | | animateBell | boolean | true | Animate the bell icon on new notifications. |

Outputs

| Output | Type | Description | | --- | --- | --- | | notificationClick | NotificationClickEvent | Emitted when a notification row is clicked. | | actionClick | NotificationActionClickEvent | Emitted when an inline action on a notification is clicked. | | markAllRead | void | Emitted when "mark all as read" is triggered. | | dismiss | NotificationDismissEvent | Emitted when a notification is dismissed. |

Documentation

Full API reference and live demos: https://styloviz.dev/docs/notification-center

License

MIT