Sonner Toast Notifications in Next.js

Let's create a Next.js application that demonstrates Sonner toast notifications with various examples and a scrollable page to test them.

Implementation

Features

This Sonner toast notification demo includes:

1. Toaster Component: Set up with the expand option enabled in the root layout

2. Various Toast Types:

   • Success toasts
   • Error toasts
   • Info toasts
   • Warning toasts
   • Promise-based toasts (with loading states)
   • Custom styled toasts

3. Interactive Elements:

   • Toast demo section with buttons to trigger different toast types
   • Mock content with posts that trigger toasts on interaction
   • Tab navigation with toast notifications
   • Newsletter subscription with promise-based toast
   • Rating system with feedback toasts

4. Responsive Design:

   • Mobile-friendly layout
   • Grid system that adapts to different screen sizes
   • Properly spaced components

5. Theme Toggle:

   • Light/dark mode toggle with toast notification

How It Works

The application uses the Sonner toast library integrated with Next.js and styled with Tailwind CSS. The main components are:

1. Layout: Sets up the Toaster component with the expand option enabled
2. Toast Demo: Showcases different types of toast notifications
3. Mock Content: Provides interactive elements that trigger toast notifications
4. Header: Contains the theme toggle with toast feedback

As you scroll through the page, you can interact with various elements to trigger different types of toast notifications, demonstrating how they work in a real-world application.