examples/web_ui/frontend/src/components/ui/sonner.tsx

import { useTheme } from 'next-themes';
import { Toaster as Sonner, type ToasterProps } from 'sonner';
import {
	CircleCheckIcon,
	InfoIcon,
	TriangleAlertIcon,
	OctagonXIcon,
	Loader2Icon,
} from 'lucide-react';

const Toaster = ({ ...props }: ToasterProps) => {
	const { theme = 'system' } = useTheme();

	return (
		<Sonner

			theme={theme as ToasterProps['theme']}

			className="toaster group"

			icons={{

				success: <CircleCheckIcon className="size-4" />,

				info: <InfoIcon className="size-4" />,

				warning: <TriangleAlertIcon className="size-4" />,

				error: <OctagonXIcon className="size-4" />,

				loading: <Loader2Icon className="size-4 animate-spin" />,

			}}

			style={

				{

					'--normal-bg': 'var(--popover)',

					'--normal-text': 'var(--popover-foreground)',

					'--normal-border': 'var(--border)',

					'--border-radius': 'var(--radius)',

				} as React.CSSProperties

			}

			toastOptions={{

				classNames: {

					toast: 'cn-toast',

				},

			}}

			{...props}

		/>
	);
};

export { Toaster };