FreeOverlays

Modal Preview Button

Use this component for confirmation dialogs, lead capture prompts, quick previews, upgrade modals, and launch checklists.

ReactTailwind CSSMotionModal

Overview

A CTA button that opens a centered animated modal with backdrop overlay.

Framework

React

Styling

Tailwind CSS

Animation

Motion

Create a Vite React project

bash

npm create vite@latest my-ui-app -- --template react-ts
cd my-ui-app
npm install

Create a Next.js project

bash

npx create-next-app@latest my-ui-app --typescript --tailwind --eslint
cd my-ui-app

Add Tailwind CSS to Vite

bash

npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p

Install dependencies

bash

npm install framer-motion

Usage

tsx

<ModalPreviewButton />

Modal Preview Button.tsx

tsx

"use client";

import { useState } from "react";
import { AnimatePresence, motion } from "framer-motion";

export function ModalPreviewButton() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button type="button" onClick={() => setOpen(true)} className="rounded-full bg-lime-300 px-5 py-3 text-sm font-bold text-zinc-950">
        Open modal
      </button>
      <AnimatePresence>
        {open && (
          <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 p-6">
            <motion.div initial={{ scale: 0.9, y: 20 }} animate={{ scale: 1, y: 0 }} exit={{ scale: 0.9, y: 20 }} className="w-full max-w-sm rounded-xl border border-white/10 bg-zinc-950 p-5 text-white">
              <p className="text-xl font-bold">Ready to ship?</p>
              <p className="mt-2 text-sm text-zinc-400">This modal is animated and ready to wire into your own flow.</p>
              <button type="button" onClick={() => setOpen(false)} className="mt-5 rounded-md bg-white px-4 py-2 text-xs font-bold text-black">Close</button>
            </motion.div>
          </motion.div>
        )}
      </AnimatePresence>
    </>
  );
}