The Modal component provides a simple way to create modals in a React application. It includes a context-based API for managing modal state and provides Trigger and Content subcomponents for interaction and display.
import { Modal, Input, Button } from "mogora-ui";
export default function ModalDemo() {
return (
<Modal>
<Modal.Trigger>
<Button variant={"clicki"}>Open</Button>
</Modal.Trigger>
<Modal.Content className="flex flex-col gap-2">
<h1 className="text-start font-bold w-full">Account</h1>
<p className="text-sm leading-4 font-medium text-slate-500">
Make changes to your account here. Click save when you're done.
</p>
<Input className="focus:ring-slate-500" theme={"info"} placeholder="Email" />
<Input className="focus:ring-slate-500" theme={"info"} placeholder="Username" />
</Modal.Content>
</Modal>
)
}
| Prop | Type | Description |
|---|---|---|
| children | ReactNode | The components inside the modal provider. |
| open | boolean | Controls whether the modal is open or closed. |
| onOpenChange | (open: boolean) => void | Callback when modal visibility changes. |
| className | string | Custom class names for styling. |
| ...props | HTMLAttributes<HTMLDivElement> | Additional props for the container. |
| Prop | Type | Description |
|---|---|---|
| children | ReactNode | The button or element that triggers the modal. |
| ...props | HTMLAttributes<HTMLSpanElement> | Additional props for customization. |
| Prop | Type | Description |
|---|---|---|
| children | ReactNode | The content inside the modal. |
| className | string | Custom class names for styling. |
| ...props | HTMLAttributes<HTMLDivElement> | Additional props for customization. |
The Modal component is a lightweight and flexible solution for handling modals in React applications. It supports a context-based state management approach, making it easy to integrate into any project.