Beautifully designed Modal Component built with Radix UI and Tailwind CSS.

Click the button below to present a modal. You can also click outside the modal to dismiss it.

Hooks

useCurrentModal()

.dismiss() to dimiss current modal.

useModalStack()

.dimiss(id: string) to dismiss a modal by id.

.dimissAll() to dismiss all modals.

.dismissTop() to dismiss the top modal.

.present(options: ModalProps) to present a sheet.

ModalProps

nametypeoptionaldefaultdescription
titlestringfalsen/a
CustomModalComponentFC<{ children?: ReactNode; }> | undefinedtruen/a
contentFC<ModalContentPropsInternal>falsen/a
clickOutsideToDismissboolean | undefinedtruen/a
modalClassNamestring | undefinedtruen/a
modalContainerClassNamestring | undefinedtruen/a
maxboolean | undefinedtruen/aIf true, the modal will be full screen.
wrapperFC<{}> | undefinedtruen/a