# Modals
Modals are can be use to show information on popup.
Home
/
Modals 
import { Modal } from "funuicss";
#
Simple Modal
Modals helps you make use of space and they are very good for displaying important text to the user
React / Next.js
#
Modal Position
You can change the position of a modal with the position prop
React / Next.js

#
Login form with modal
You can also create login and signup form with modals
React / Next.js
Modal
The <Modal /> wraps everything.
PropDescriptionValue(s)
`open`Controls the visibility of the modal.`true | false`
`hideClose`Hides the close icon.`true | false`
`setOpen`Function to change the modal's open state.`(val: boolean) => void`
`position`Sets the position of the modal on the screen.`center (default) | left | right | top-left | top-right | top-middle | bottom-left | bottom-middle | bottom-right`
`animation`Applies an animation effect when the modal appears.`ScaleUp | Opacity | SlideUp | SlideDown | SlideLeft | SlideRight`
`duration`Sets the animation duration in seconds.`number (e.g., 0.3)`
`width`Specifies the modal's width.`CSS width values (e.g., '400px', '80%', 'max-content')`
`height`Specifies the modal's height.`CSS height values (e.g., '300px', 'auto')`
`maxWidth`Specifies the maximum width of the modal.`CSS width values (e.g., '600px', '100%')`
`maxHeight`Specifies the maximum height of the modal.`CSS height values (e.g., '80vh')`
`backdrop`Enables a dimmed backdrop behind the modal.`true | false`
`title`The content displayed in the modal's header.`ReactNode`
`titlecss`Custom classes for the modal title section.`string (e.g., 'text-bold text-lg')`
`close`Custom close icon or element for the top-right corner.`ReactNode`
`closecss`Custom classes for the close icon.`string`
`body`Main content body of the modal.`ReactNode`
`bodycss`CSS classes to style the modal body.`string`
`footer`Custom footer content, such as actions or buttons.`ReactNode`
`footercss`CSS classes to style the footer section.`string`
`children`Any additional children inside the modal.`ReactNode`
`funcss`Additional utility classes for the modal container.`string`
`id`Custom ID for the modal container.`string`
`flat`Removes default modal styles for flat layout.`true | false`
`onOk`Callback function triggered when the default OK button is clicked (used when no custom footer is passed).`() => void`
`onOkText`Text label for the default OK button.`string (e.g., 'Confirm', 'Submit')`
`okIcon`Optional icon to show before the OK button text.`ReactNode (e.g., <PiCheck />)`