Dialog

pnpm add @base-ui/react motion

"use client";

import { Dialog } from "@base-ui/react/dialog";
import { XIcon } from "@phosphor-icons/react";
import { AnimatePresence, motion } from "motion/react";
import * as React from "react";

export default function ExampleDialog() {
  const [open, setOpen] = React.useState(false);

  return (
    <Dialog.Root open={open} onOpenChange={setOpen}>
      <Dialog.Trigger className="bg-white c-slate-10 br-2 px-3 py-2 fw-600 bsh-xs bw-1 bc-silver-2 us-none tp-c tdu-150 ttf-io h:bg-silver-1/50 fv:os-s fv:ow-2 fv:oo-2 fv:oc-indigo-6 c-p b-0">
        Get updates
      </Dialog.Trigger>
      <AnimatePresence>
        {open && (
          <Dialog.Portal keepMounted>
            <Dialog.Backdrop
              render={
                <motion.div
                  initial={{ opacity: 0 }}
                  animate={{ opacity: 1 }}
                  exit={{ opacity: 0 }}
                  transition={{ duration: 0.15 }}
                />
              }
              className="p-f i-0 min-h-dvh bg-black/20"
            />
            <div className="p-f i-0 d-f ai-c jc-c">
              <Dialog.Popup
                render={
                  <motion.div
                    initial={{ opacity: 0, scale: 0.95 }}
                    animate={{ opacity: 1, scale: 1 }}
                    exit={{ opacity: 0, scale: 0.95 }}
                    transition={{ duration: 0.15, ease: "easeOut" }}
                  />
                }
                className="w-96 br-2 bg-white c-slate-12 bsh-lg bw-1 bc-silver-2 o-h"
                style={{ maxWidth: "90vw" }}
              >
                <div className="d-f jc-sb ai-c px-4 py-2 bg-silver-1/50">
                  <Dialog.Title className="fs-sm fw-600 m-0">
                    Subscribe to updates
                  </Dialog.Title>
                  <Dialog.Close className="d-f ai-c jc-c d-7 br-2 bg-transparent b-0 c-p c-slate-6 h:bg-silver-2 fv:os-s fv:ow-2 fv:oo-2 fv:oc-indigo-6">
                    <XIcon size={16} weight="bold" aria-hidden />
                  </Dialog.Close>
                </div>
                <div className="bbw-1 bc-silver-2" />
                <div className="px-4 py-5">
                  <Dialog.Description className="fs-sm c-slate-7 m-0 lh-4 mb-4">
                    Stay informed with our latest news and product updates
                    delivered directly to your inbox.
                  </Dialog.Description>
                  <ul className="m-0 p-0 ls-n fs-sm c-slate-8 d-f fd-c g-2">
                    <li className="d-f ai-c g-2">
                      <span className="d-2 br-pill bg-indigo" />
                      Weekly product highlights
                    </li>
                    <li className="d-f ai-c g-2">
                      <span className="d-2 br-pill bg-indigo" />
                      New feature announcements
                    </li>
                    <li className="d-f ai-c g-2">
                      <span className="d-2 br-pill bg-indigo" />
                      Exclusive early access
                    </li>
                  </ul>
                </div>
                <div className="d-f ai-c g-3 px-4 py-3">
                  <Dialog.Close className="bg-indigo c-white br-2 px-3 py-2 fw-600 bsh-md bw-1 bc-indigo-7 us-none tp-c tdu-150 ttf-io h:bg-indigo-8 fv:os-s fv:ow-2 fv:oo-2 fv:oc-indigo-6 c-p b-0">
                    Subscribe
                  </Dialog.Close>
                  <Dialog.Close className="c-slate-10 br-2 px-3 py-2 fw-600 us-none bg-transparent b-0 c-p tp-c tdu-150 ttf-io h:c-slate-12 h:bg-silver-1/55 fv:os-s fv:ow-2 fv:oo-2 fv:oc-indigo-6">
                    Maybe later
                  </Dialog.Close>
                </div>
              </Dialog.Popup>
            </div>
          </Dialog.Portal>
        )}
      </AnimatePresence>
    </Dialog.Root>
  );
}