Tailwind CSS Alert - React

Get started on your web projects with our Tailwind CSS Alert which provides contextual feedback messages for typical user actions.

An Alert displays a short and important message attracting the user's attention without interrupting the user's task. Use this element when you need to show highly-important messages to users or when you need a persistent static container that is closable by user actions.

See below our simple Alert example that you can use in your Tailwind CSS and React project. The example also comes in different styles and colors, so you can adapt it easily to your needs.

Alert Variants

The Alert component comes with 2 different variants that you can change it using the variant prop.

Alert Colors

The Alert component comes with 19 different colors that you can change it using the color prop.

Alert with Icon

You can add an icon at the beginning of Alert component using the icon prop.

Alert Dismissible

The Alert component is a dismissible component that you can control it using the dismissible and show props.

Custom Alert Animation

You can modify the open/close state animation for Alert component using the animate prop.

Edit this page on Github