Modal

The Modal component renders an animated dialog on top of the page. It portals into document.body so the overlay always sits above transformed or clipped ancestors, and it closes on Escape, on a click outside, or with the built-in close button.

The Modal is a controlled component: the parent owns the open state. The dialog surface carries role="dialog" and aria-modal="true", and takes its accessible name from $title.

"use client";
import React, { useState } from "react";
import { Button, Modal } from "cherry-styled-components";

export default function Page() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setIsOpen(true)}>Open Modal</Button>
      <Modal
        $isOpen={isOpen}
        $onClose={() => setIsOpen(false)}
        $title="Modal Title"
      >
        Modal content goes here.
      </Modal>
    </>
  );
}

With a custom width for larger content:

<Modal $isOpen={isOpen} $onClose={close} $width={800}>
  Content
</Modal>

Restyling

To restyle the modal from your app, pass a className (or style). Both are applied to the overlay root, and the inner parts expose stable class hooks: .modal-inner, .modal-close, .modal-title, and .modal-content.

<Modal $isOpen={isOpen} $onClose={close} className="checkout-modal">
  Content
</Modal>

.checkout-modal .modal-inner {
  border-radius: 24px;
}

Properties