@syncfusion/react-notifications

React Notifications Components

What's Included in the React Notification Package

The React Notification package includes the following list of components.

React Message

The Message component has an option to display the messages with severity by differentiating icons and colors to denote the importance and context of the message to the end user. The following key features are available in the Message component.

Explore the demo here

Key features

• Severity: Provides an option to display the message with distinctive icons and colors based on the severity type. The available severity types such as Normal, Success, Info, Warning, and Error.

• Variants: Provides an option to display the message with predefined appearance variants. The available variants such as Text, Outlined, and Filled.

• Visibility: Provides an option to show or hide the message.

• Template: Provides an option to customize the content of the message.

React Toast

The Toast component provides a non-intrusive way to display temporary notifications to users. It offers a flexible system for showing messages that automatically dismiss after a configurable timeout period.

Explore the demo here

Key features

• Multiple Positions: Position toasts at different locations on the screen (top-left, top-right, bottom-left, bottom-right, etc.) to suit your application's design.

• Severity: Display toasts with different severity levels (Success, Info, Warning, Error) with appropriate icons and colors to convey message importance.

• Customizable Timeout: Configure how long toasts remain visible before automatically dismissing.

• Animation Effects: Apply entrance and exit animations to enhance the user experience.

• Global Toast Service: Use the ToastUtility or useToast hook to display toasts from anywhere in your application without needing to include the component in your JSX.

React Skeleton

The Skeleton component provides a visual placeholder that simulates the layout of content while it's being loaded, improving the perceived performance of your application. It offers various shapes and animation effects to match your UI design needs.

Explore the demo here

Key features

• Variants: Choose from multiple placeholder shapes including Text, Circle, Square, and Rectangle to match the content being loaded.

• Animation: Apply different loading animations such as Wave, Fade or Pulse to provide visual feedback during loading states.

• Customizable Dimensions: Easily configure the width and height of skeleton elements using CSS units or pixel values.

Trusted by the world's leading companies

Setup

To install notifications and its dependent packages, use the following command,

npm install @syncfusion/react-notifications

Support

Product support is available through following mediums.

• Support ticket - Guaranteed Response in 24 hours | Unlimited tickets | Holiday support
• Live chat

Changelog

Check the changelog here. Get minor improvements and bug fixes every week to stay up to date with frequent updates.

License and copyright

This is a commercial product and requires a paid license for possession or use. Syncfusion’s licensed software, including this component, is subject to the terms and conditions of Syncfusion's EULA. To acquire a license for React UI components, you can purchase or start a free 30-day trial.

A free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

See LICENSE FILE for more info.

© Copyright 2025 Syncfusion, Inc. All Rights Reserved. The Syncfusion Essential Studio license and copyright applies to this distribution.