Notification components

Powerful and customizable React notification components built for modern applications and websites. These notifications are built using Sonner and styled with Tailwind CSS.

Notification example

Get the code

Version 1.4.1 is now available

Includes the all new dashboard view. Pages and exports will now load faster.

Click to trigger a toast

Installation

You can add this notifications component using our CLI or manually:

npx untitledui add notifications

Notifications examples

Below are examples and variations of this notifications component:

Icon default

Get the code

Version 1.4.1 is now available

Includes the all new dashboard view. Pages and exports will now load faster.

Click to trigger a toast

Icon gray

Get the code

We've just released a new feature

Check out the all new dashboard view. Pages and exports now load faster.

Click to trigger a toast

Icon brand

Get the code

We've just released a new feature

Check out the all new dashboard view. Pages and exports now load faster.

Click to trigger a toast

Icon error

Get the code

This project has been unpublished

Removing all users has unpublished this project. Add users to republish.

Click to trigger a toast

Icon warning

Get the code

This project has been unpublished

Removing all users has unpublished this project. Add users to republish.

Click to trigger a toast

Icon success

Get the code

Successfully updated profile

Your changes have been saved and your profile is live. Your team can make edits.

Click to trigger a toast

Progress notification

Get the code

Uploading 'website-FINAL06.fig'

Please wait while we upload your file.

75% uploaded...

Click to trigger a toast

Image notification

Get the code

We've just released a new update!

Check out the all new dashboard view. Pages and exports now load faster.

Image Desktop

Click to trigger a toast

Avatar notification

Get the code
Katherine Moss

Katherine Moss

2 mins ago

I've finished adding my notes. Happy for us to review whenever you're ready!

Click to trigger a toast

API reference

AvatarNotification

Import AvatarNotification from @/components/application/notifications/notifications. Renders a <div> element.

AvatarNotification props
PropTypeDefaultDescription
name* (required)string—Name of the person the notification is from. Shown in bold beside the date and used as the avatar's alt text.
content* (required)string—Message body shown under the name and date.
avatar* (required)string—Image URL for the sender's avatar, which always renders with an online status dot.
date* (required)string—Timestamp shown in muted text next to the sender's name.
confirmLabel* (required)string—Label for the primary action button. The button is only rendered when a label is provided.
dismissLabelstring"Dismiss"Label for the secondary text button that triggers onClose.
hideDismissLabelboolean—Whether to hide the dismiss text button. The close icon button in the top-right corner is always rendered.
iconFC<{ className?: string; }>—Not rendered by this variant, which always shows the sender's avatar in place of an icon.
color
"default""brand""gray""error""warning""success"
—Not rendered by this variant, which has no featured icon to color.
onClose(() => void)—Handler called when the close icon button or the dismiss button is pressed. Typically dismisses the toast.
onConfirm(() => void)—Handler called when the confirm button is pressed.

IconNotification

Import IconNotification from @/components/application/notifications/notifications. Renders a <div> element.

IconNotification props
PropTypeDefaultDescription
title* (required)string—Bold heading shown at the top of the toast.
description* (required)string—Body text shown under the notification title.
confirmLabelstring—Label for the primary action button. The button is only rendered when a label is provided.
dismissLabelstring"Dismiss"Label for the secondary text button that triggers onClose.
hideDismissLabelboolean—Whether to hide the dismiss text button. The close icon button in the top-right corner is always rendered.
iconFC<{ className?: string; }>—Icon rendered inside the featured icon. Falls back to an icon picked from color: a check circle for success, an alert circle for error and warning, an info circle otherwise.
color
"default""brand""gray""error""warning""success"
"default"Semantic color of the featured icon, which also picks the fallback icon. default renders a gray modern featured icon, the rest an outlined one in the matching color.
progressnumber—Completion percentage for a progress bar rendered between the text and the actions, labelled "{value}% uploaded...". Omit it to render no progress bar.
onClose(() => void)—Handler called when the close icon button or the dismiss button is pressed. Typically dismisses the toast.
onConfirm(() => void)—Handler called when the confirm button is pressed.

ImageNotification

Import ImageNotification from @/components/application/notifications/notifications. Renders a <div> element.

ImageNotification props
PropTypeDefaultDescription
title* (required)string—Bold heading shown at the top of the toast.
description* (required)string—Body text shown under the notification title.
confirmLabel* (required)string—Label for the primary action button. The button is only rendered when a label is provided.
imageMobile* (required)string—Image source for the tall thumbnail in the left column, which is only shown from the md breakpoint up.
imageDesktop* (required)string—Image source for the wide banner above the action buttons, which is only shown below the md breakpoint.
dismissLabelstring"Dismiss"Label for the secondary text button that triggers onClose.
hideDismissLabelboolean—Whether to hide the dismiss text button. The close icon button in the top-right corner is always rendered.
onClose(() => void)—Handler called when the close icon button or the dismiss button is pressed. Typically dismisses the toast.
onConfirm(() => void)—Handler called when the confirm button is pressed.

FAQs

Please refer to our frequently asked questions page for more.

There are three: IconNotification (a featured icon with a title, description and actions), AvatarNotification (an avatar with a name, timestamp and message), and ImageNotification (a thumbnail beside the copy). All three are exported from the same notifications.tsx file.

These components render the toast body — Sonner shows it. Render <Toaster /> once near the root of your app — import { Toaster } from "@/components/application/notifications/toaster" — then call toast.custom((t) => <IconNotification ... onClose={() => toast.dismiss(t)} />) from sonner wherever you need it. Pass Sonner options such as duration or id as the second argument to toast.custom.

The color prop accepts "default", "brand", "gray", "error", "warning" and "success", and defaults to "default". The color also picks the icon automatically — InfoCircle for "default", "brand" and "gray", AlertCircle for "error" and "warning", and CheckCircle for "success" — and "default" renders the featured icon in the modern theme while the others use outline.

Yes. Pass any icon component to the icon prop of IconNotification and it overrides the icon that color would otherwise select, for example icon={UploadCloud02} from @untitledui/icons.

Pass a number to the progress prop of IconNotification. It renders a ProgressBar with a "{value}% uploaded..." label under the description. To animate it, keep the id returned by toast.custom and call toast.custom(..., { id }) again with the updated progress value.

Set confirmLabel with onConfirm for the primary link button and dismissLabel with onClose for the secondary one — dismissLabel defaults to "Dismiss". Pass hideDismissLabel to drop the text dismiss button; the close icon button in the top-right corner is always rendered and also calls onClose.

Toaster, ToastsOverlay and DEFAULT_TOAST_POSITION are all exported from @/components/application/notifications/toaster. Toaster renders Sonner at the DEFAULT_TOAST_POSITION constant, which is "bottom-right", and sets a --width of 400px (ImageNotification overrides it to 496px). Below the xs breakpoint the notification goes full width and stacks its content vertically. ToastsOverlay draws the background gradient and supports "top-right", "top-left", "bottom-right" and "bottom-left", so per-toast position options are handled too.

ModalsPage headers