Preview Card

pnpm add @base-ui/react motion

"use client";

import { PreviewCard } from "@base-ui/react/preview-card";
import { AnimatePresence, motion } from "motion/react";
import * as React from "react";

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

  return (
    <PreviewCard.Root open={open} onOpenChange={setOpen}>
      <p className="fs-sm c-slate-10 m-0">
        Learn more about{" "}
        <PreviewCard.Trigger
          className={`c-indigo fw-600 td-n h:td-u fv:td-u ${open ? "td-u" : ""}`}
          href="https://en.wikipedia.org/wiki/Responsive_web_design"
        >
          responsive design
        </PreviewCard.Trigger>{" "}
        and modern web layouts.
      </p>

      <AnimatePresence>
        {open && (
          <PreviewCard.Portal keepMounted>
            <PreviewCard.Positioner sideOffset={8}>
              <PreviewCard.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="d-f fd-c g-2 w-64 p-3 br-2 bg-white bsh-lg bw-1 bc-silver-2"
              >
                {/* biome-ignore lint: Using img for external URL */}
                <img
                  width="232"
                  height="140"
                  className="d-b w-full h-auto br-2"
                  src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=464&h=280"
                  alt="MacBook with code on screen"
                />
                <p className="fs-xs c-slate-8 m-0 lh-4">
                  <strong className="fw-600 c-slate-10">
                    Responsive design
                  </strong>{" "}
                  adapts layouts to different screen sizes for optimal viewing.
                </p>
              </PreviewCard.Popup>
            </PreviewCard.Positioner>
          </PreviewCard.Portal>
        )}
      </AnimatePresence>
    </PreviewCard.Root>
  );
}