# 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.

- [Sonner](https://sonner.emilkowal.ski/)
- [Figma](/content/components/notifications/index.html)

Version 1.4.1 is now available

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

LaterInstall now

Click to trigger a toast

## [Installation](/content/react/components/notifications#installation/index.html)

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

### CLI

```
npx untitledui add notifications
```

### Manual

## [Notifications examples](/content/react/components/notifications#notifications-examples/index.html)

Below are examples and variations of this notifications component:

Version 1.4.1 is now available

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

LaterInstall now

Click to trigger a toast

We've just released a new feature

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

DismissChangelog

Click to trigger a toast

We've just released a new feature

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

DismissChangelog

Click to trigger a toast

This project has been unpublished

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

Undo action

Click to trigger a toast

This project has been unpublished

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

Undo action

Click to trigger a toast

Successfully updated profile

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

DismissView changes

Click to trigger a toast

Uploading 'website-FINAL06.fig'

Please wait while we upload your file.

75% uploaded...

CancelUpload another

Click to trigger a toast

We've just released a new update!

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

DismissChangelog

Click to trigger a toast

Katherine Moss

2 mins ago

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

DismissChangelog

Click to trigger a toast

On this page

- [Installation](/content/react/components/notifications#installation/index.html)
- [Notifications examples](/content/react/components/notifications#notifications-examples/index.html)
- [Icon default](/content/react/components/notifications#icon-default/index.html)
- [Icon gray](/content/react/components/notifications#icon-gray/index.html)
- [Icon brand](/content/react/components/notifications#icon-brand/index.html)
- [Icon error](/content/react/components/notifications#icon-error/index.html)
- [Icon warning](/content/react/components/notifications#icon-warning/index.html)
- [Icon success](/content/react/components/notifications#icon-success/index.html)
- [Progress notification](/content/react/components/notifications#progress-notification/index.html)
- [Image notification](/content/react/components/notifications#image-notification/index.html)
- [Avatar notification](/content/react/components/notifications#avatar-notification/index.html)