Tailwind CSS Modal - React

Use our React and Tailwind CSS Modal component to inform users about a task or important information that require decisions, or involves multiple tasks.

A modal is a type of modal window with critical information which disable all app functionality when they appear and remains on screen until confirmed/dismissed.

See below our Modal component examples that you can use for your Tailwind CSS and React project.

Modal Demo

Here's how to implement a simple and responsive Modal component. It can be used to inform users about a task or important information that require decisions, or involves multiple tasks in your website.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

Modal Sizes

We provide different modal sizes like xs, sm, md, lg, xl and screen so you can adapt it easily to your needs. You can simply use the size prop to change the modal size.

In the example below, we've showcased the different modal sizes that you can use in your project. In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

Modal with Form

Use this example to create a modal with a authentication form. You can use this modal to create a login or sign up form in your website.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

Modal with Image

Use this example to create a modal with image and some action inspired by Unsplash. You can use this modal to show a preview of an image and some actions like download or share.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

Web 3 Modal

Use this example to create a modal with Web 3 wallet connection. You can use this modal to provide a way for users to connect their Web 3 wallet to your website.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

Long Modal

Use this example to create a scrollable modal with long content. You can use this modal to show a long text or content that requires scrolling.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

Message Modal

Use this example to create a modal with a message form. You can use this modal to create a message form for writing a messsage or comment in your website.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.

Modal Notification

Use this example to create a modal with a notification. You can use this modal to show a notification message to the user that requires their attention.

In the example below we've used the Iconoir icons, but you can use any other icon library you prefer.