The Modal component is a flexible and interactive UI element designed to capture user attention and present important information or actions. It supports various styles and configurations, such as default, informational, confirmation, and custom layouts. Below are examples demonstrating different uses of the Modal component.
A simple modal with default styling. Ideal for general use cases where basic modal functionality is needed.
<Modal
isOpen={true}
onClose={() => {}}
title="Default Modal"
titleColor="text-black"
backgroundColor="bg-white"
textColor="text-gray-800"
animationType="fade" // Default animation
>
<p>This is a simple modal with default styling.</p>
<div className="mt-4">
<button className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">Close</button>
</div>
</Modal>
A modal that slides in from the right side of the screen.
<Modal
isOpen={true}
onClose={() => {}}
title="Slide Right Modal"
titleColor="text-green-600"
backgroundColor="bg-gray-800"
textColor="text-white"
animationType="slide-right" // Slide right animation
>
<p>This modal slides in from the right.</p>
<div className="mt-4">
<button className="bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition">Close</button>
</div>
</Modal>
A modal that slides in from the left side of the screen.
<Modal
isOpen={true}
onClose={() => {}}
title="Slide Left Modal"
titleColor="text-blue-600"
backgroundColor="bg-gray-800"
textColor="text-white"
animationType="slide-left" // Slide left animation
>
<p>This modal slides in from the left.</p>
<div className="mt-4">
<button className="bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition">Close</button>
</div>
</Modal>
A modal that slides in from the top of the screen.
<Modal
isOpen={true}
onClose={() => {}}
title="Slide Top Modal"
titleColor="text-red-600"
backgroundColor="bg-gray-100"
textColor="text-gray-700"
animationType="slide-top" // Slide top animation
>
<p>This modal slides in from the top.</p>
<div className="mt-4">
<button className="bg-red-600 text-white px-4 py-2 rounded-lg hover:bg-red-700 transition">Close</button>
</div>
</Modal>
A modal that slides in from the bottom of the screen.
<Modal
isOpen={true}
onClose={() => {}}
title="Slide Bottom Modal"
titleColor="text-purple-600"
backgroundColor="bg-gray-200"
textColor="text-black"
animationType="slide-bottom" // Slide bottom animation
>
<p>This modal slides in from the bottom.</p>
<div className="mt-4">
<button className="bg-purple-600 text-white px-4 py-2 rounded-lg hover:bg-purple-700 transition">Close</button>
</div>
</Modal>