Modals are can be use to show information on popup.
Modal
The <Modal /> wraps everything.
| Prop | Description | Value(s) |
|---|---|---|
| `open` | Open and close modal | `True, False` |
| `position` | To set the position of the modal | `left | right | top-left | top-right | top-middle | bottom-left | bottom-middle | bottom-right` |
| `animation` | Create an animation effect for your modal | `ScaleUp , Opacity , SlideUp, SlideDown, SlideLeft, SlideRight` |
| `duration` | animation duration | `<number>` |
| `maxWidth` | To specify the maximum width of your modal | `CSS Measurement values` |
#
Simple Modal
Modals helps you make use of space and they are very good for displaying important text to the user
React / Next.js Show Source Code
#
Modal Position
You can change the position of a modal with the position prop
React / Next.js Show Source Code
#
Login form with modal
You can also create login and signup form with modals
React / Next.js Show Source Code