Modal

The Modal component is a dialog box that appears on top of the main content, used to display important information or prompt user interaction.

Basic Usage

import { Modal, ThemeProvider } from "@carton-org/react-neumorphism";
import { useState } from "react";

const MyComponent = () => {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <Modal isOpen={isOpen} onClose={() => setIsOpen(false)} title="Modal Title">
      Modal content goes here
    </Modal>
  );
};

Live Example

Props

Name	Type	Description	Required	Default Value
width	number	Width of the modal in pixels	No	-
height	number	Height of the modal in pixels	No	-
isOpen	boolean	Whether the modal is visible	Yes	-
onClose	() => void	Callback function when modal is closed	No	-
title	string	Title text displayed at the top of the modal	No	-
children	React.ReactNode	Content to be displayed inside the modal	Yes	-

Examples

With Custom Dimensions

Without Title