Modal

Display a dialog with a custom content that requires attention or provides additional information.

import { Modal } from '@nextui-org/react';

Default

Use open prop to control whether Modal is displayed.

Large content

There are cases where you need a scroll because there is a lot of information within the Modal for this you can use the scroll property.

Full screen

If you need the Modal to be the total window size you can do it with the fullScreen property.

Without padding

If you need to remove the padding from the dialog to make a more personalized interface you can do it with the noPadding property.

Blur background

You can add a blur style to all the elements behind the Modal with the blur property, this functionality depends on the css property backdrop-filter.

Prevent close

With the preventClose property you can't close the dialog by clicking outside or pressing the esc key.

No Animated

You can disable the animation of the entire Modal with the property animated={false}.

APIs

AttributeTypeAccepted valuesDescriptionDefault
openbooleantrue/falseDetermine if the modal is visible or hiddenfalse
scrollbooleantrue/falseMakes the content a maximum high and gives the possibility to overflow the content add scrollfalse
blurbooleantrue/falseMakes all elements blur when the modal opensfalse
animatedbooleantrue/falseDisplay the modal with opening and close animationtrue
noPaddingbooleantrue/falseEliminates the padding of the base elements of the modalfalse
closeButtonbooleantrue/falseDetermine if the modal close button is visible or hiddenfalse
fullScreenbooleantrue/falseMakes the modal the size of the windowfalse
autoMarginbooleantrue/falseApply or not a margin to the base elements of the modal-
preventClosebooleantrue/falseModal cannot be closed by clicking outside or by pressing the esc keyfalse
widthstring number% px rem emDetermine the width of the modal400px
onClose() => void-Callback fired when the modal is closed-
onOpen() => void-Callback fired when the modal is open-
...HTMLAttributes'id', 'className', ...Native props-

Modal.Header Props

AttributeTypeAccepted valuesDescriptionDefault
autoMarginbooleantrue/falseApply or not a margin to the base elements of the modaltrue
justifyJustifyJustifyCSS "justify-content" propertycenter
...HTMLAttributes'id', 'className', ...Native props-

Modal.Body Props

AttributeTypeAccepted valuesDescriptionDefault
autoMarginbooleantrue/falseApply or not a margin to the base elements of the modaltrue
...HTMLAttributes'id', 'className', ...Native props-

Modal.Footer Props

AttributeTypeAccepted valuesDescriptionDefault
autoMarginbooleantrue/falseApply or not a margin to the base elements of the modaltrue
justifyJustifyJustifyCSS "justify-content" propertyflex-end
...HTMLAttributes'id', 'className', ...Native props-

Justify

type Justify =
  | 'flex-start'
  | 'center'
  | 'flex-end'
  | 'space-between'
  | 'space-around'
  | 'space-evenly';

useModal

type useModal = (initialVisible: boolean) => {
  visible: boolean;
  setVisible: Dispatch<SetStateAction<boolean>>;
  currentRef: MutableRefObject<boolean>;
  bindings: {
    open: boolean;
    onClose: () => void;
  };
};