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 3 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 with List

You can add any element you want for the Alert component, below is a example of alert with a list inside.

Alert Dismissible

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

Custom Alert Animation

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

Custom Alert Close Icon

You can modify the close icon for Alert component using the dismissible prop.

Alert with Content

Use the example below to use Alert component with more content like title and description.

Edit this page on Github