ThemedToaster

Theme-aware toast notification container

Overview

ThemedToaster is a wrapper around Sonner's Toaster that automatically syncs with the app's dark/light theme. Place it once in your root layout, then use toast() from sonner anywhere to show notifications.

Key Features

Automatic dark/light theme sync via useTheme()
Rich colors for success/error/warning/info states
Close button on all toasts
Bottom-right positioning
Promise toast for async operations

Examples

Toast Types

Click buttons to trigger different toast types.

Promise Toast

Promise toast shows loading, then success or error based on result.

Custom Component

Render a custom React component as the toast content.

Props Reference

ThemedToaster has no props. It reads theme from ThemeProvider automatically.

Internal Configuration

Prop	Type	Description
`position`	`"bottom-right"`	Toast container position (hardcoded)
`theme`	`from useTheme()`	Syncs with app theme automatically
`richColors`	`true`	Enables colored backgrounds for toast types
`closeButton`	`true`	Shows close button on all toasts

Usage

Setup (Root Layout)

// In root layout (app/layout.tsx)
import { ThemedToaster } from '@/ui/components';
import { ThemeProvider } from '@/lib/theme-provider';

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        <ThemeProvider>
          {children}
          <ThemedToaster />
        </ThemeProvider>
      </body>
    </html>
  );
}

Triggering Toasts

// In any client component
import { toast } from 'sonner';

// Basic toasts
toast.success('Saved successfully!');
toast.error('Something went wrong');
toast.warning('Are you sure?');
toast.info('FYI: New features available');
toast.loading('Processing...');

// With description
toast.success('File uploaded', {
  description: 'document.pdf (2.4 MB)',
});

// Promise toast (auto-updates based on result)
toast.promise(saveData(), {
  loading: 'Saving...',
  success: 'Data saved!',
  error: 'Failed to save',
});

// Custom component
toast.custom((t) => (
  <div className="custom-toast">
    <span>Custom content</span>
    <button onClick={() => toast.dismiss(t)}>Dismiss</button>
  </div>
));

Prop

Type

Description

position

"bottom-right"

Toast container position (hardcoded)

theme

from useTheme()

Syncs with app theme automatically

richColors

true

Enables colored backgrounds for toast types

closeButton

true

Shows close button on all toasts

// In root layout (app/layout.tsx) import { ThemedToaster } from '@/ui/components'; import { ThemeProvider } from '@/lib/theme-provider'; export default function RootLayout({ children }) { return ( <html> <body> <ThemeProvider> {children} <ThemedToaster /> </ThemeProvider> </body> </html> ); }

// In any client component import { toast } from 'sonner'; // Basic toasts toast.success('Saved successfully!'); toast.error('Something went wrong'); toast.warning('Are you sure?'); toast.info('FYI: New features available'); toast.loading('Processing...'); // With description toast.success('File uploaded', { description: 'document.pdf (2.4 MB)', }); // Promise toast (auto-updates based on result) toast.promise(saveData(), { loading: 'Saving...', success: 'Data saved!', error: 'Failed to save', }); // Custom component toast.custom((t) => ( <div className="custom-toast"> <span>Custom content</span> <button onClick={() => toast.dismiss(t)}>Dismiss</button> </div> ));