Center Morph Modal

Component 12

About

A composable modal dialog whose panel unfolds outward from its exact center to full size and folds back the same way when closed, with focus trapping and an inset close button.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Center Morph Modal to your project and fits it to your theme.

Code

How Center Morph Modal is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import {
  CenterMorphModal,
  CenterMorphModalContent,
  CenterMorphModalTrigger,
} from "@/components/ui/center-morph-modal";
import { ArrowUpRight, Check } from "lucide-react";

export default function CenterMorphModalDemo() {
  return (
    <div className="flex min-h-[420px] w-full items-center justify-center">
      <CenterMorphModal>
        <CenterMorphModalTrigger>
          <button
            type="button"
            className="inline-flex h-10 items-center justify-center rounded-full bg-foreground px-5 text-sm font-medium text-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
          >
            Open modal
          </button>
        </CenterMorphModalTrigger>

        <CenterMorphModalContent
          ariaLabel="beUI Pro"
          ariaDescribedBy="center-morph-pro-description"
        >
          <div className="p-7 sm:p-8">
            <p className="text-sm font-medium text-muted-foreground">
              beUI Pro
            </p>
            <h2 className="mt-5 max-w-xs pr-8 text-2xl font-medium tracking-tight text-foreground">
              Ship the whole experience.
            </h2>
            <p
              id="center-morph-pro-description"
              className="mt-3 text-sm leading-relaxed text-muted-foreground"
            >
              Go beyond individual components with premium animated sections and
              complete Next.js templates.
            </p>

            <div className="mt-7 space-y-3 border-y border-border py-5">
              {[
                "Premium animated sections",
                "Complete Next.js templates",
                "Editable source and private registry",
              ].map((feature) => (
                <div
                  key={feature}
                  className="flex items-center gap-3 text-sm text-foreground"
                >
                  <Check
                    className="h-4 w-4 text-muted-foreground"
                    aria-hidden="true"
                  />
                  <span>{feature}</span>
                </div>
              ))}
            </div>

            <a
              href="https://pro.beui.dev/"
              target="_blank"
              rel="noreferrer"
              className="mt-7 inline-flex h-11 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-sm font-medium text-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background"
            >
              Explore beUI Pro
              <ArrowUpRight className="h-4 w-4" aria-hidden="true" />
            </a>
          </div>
        </CenterMorphModalContent>
      </CenterMorphModal>
    </div>
  );
}