Toaster

The <Toaster /> component is used to show toasts in your application

Position

By default, the default position is bottom-right. You can customize the position of the toasts by using the position prop of the Toaster component:

Theme

You can set the theme of the toasts using the theme prop, which accepts the values: light, dark, and system:

MaxToasts

By default, the maximum number of toasts is set to 4. You can change this value using the maxToasts prop:

<Toaster maxToasts={8} />

ToastFont

By default, the font of the toasts is:

ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Segoe
UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif, Apple Color Emoji,
Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;

You can change this value using the toastFont prop. In this case, we are using the utility class font-sans from Tailwind CSS to set the font:

<Toaster toastFont="font-sans" />

API Reference

The <Toaster /> component accepts the following options:

PropertyDescriptionTypeRequired
themeTheme of the all toastsTheme (default: system): 'light', 'dark', or 'system'-
maxToastsMaximum number of toasts to displaynumber-
positionPosition of the toaster on the screenPosition (default: bottom-right): 'top-left', 'top-right', 'top-center', 'bottom-left', 'bottom-right' or 'bottom-center'-
toastFontFont style for the all toastsstring-