Shadcn Sonner Toast Site

Creating a Site with shadcn/ui Sonner Toast Component

Let's build a Next.js application that demonstrates the Sonner toast component from shadcn/ui 1.

How It Works

This demo showcases the Sonner toast component from shadcn/ui with various configurations:

Setup: The Toaster component is added to the root layout to make toasts available throughout the application 1.
Toast Types:
- Default toast
- Success toast
- Error toast
- Info toast
- Warning toast
- Custom toast with actions
Advanced Features:
- Promise-based toasts that show loading, success, and error states
- Updating existing toasts
- Controlling toast position and duration

Key Components

Toaster: The main component that renders the toast notifications
toast function: Used to trigger different types of toasts with various configurations

Usage

To use the toast functionality in your components:

import { toast } from "sonner"

// Basic toast
toast("Hello world!")

// Success toast
toast.success("Operation completed successfully")

// Error toast
toast.error("Something went wrong")

// Promise toast
toast.promise(fetchData(), {
  loading: "Loading...",
  success: "Data loaded successfully",
  error: "Failed to load data"
})

You can customize the appearance, position, duration, and add actions to your toasts as shown in the demo.