Theme-Aware Toaster

ThemeAwareToaster renders Sonner's <Toaster> with its theme prop wired to useTheme(). When the site switches between light and dark mode the toast theme updates in sync — no extra configuration needed.

Mount it once at the root of your layout next to your ThemeProvider. The component also re-exports the toast utility so you can trigger toasts from anywhere without importing from sonner directly.

All ToasterProps are forwarded to the underlying <Toaster>, giving full access to position, richColors, duration, and other Sonner options.

Installation

npx shadcn@latest add @adv/theme-aware-toaster

Usage

// In app/layout.tsx (or a root client wrapper):
import { ThemeAwareToaster, toast } from '@/components/ui/theme-aware-toaster';

<ThemeAwareToaster position="bottom-right" />

// Trigger from anywhere:
toast('Hello!');
toast.success('Saved.');
toast.error('Something went wrong.');

Example

Props

All other ToasterProps from Sonner (position, richColors, duration, closeButton, etc.) are passed through directly.