An animated modal dialog powered by Framer Motion with smooth fade and slide transitions, ideal for edit forms, confirmations, and popups.
"use client";
import {
FramerModal,
ModalContent,
} from "@/components/ui/dialog-default-utils/dialog";
import type React from "react";
import { useState } from "react";
export default function Default() {
const [modalOpen, setModalOpen] = useState(true);
return (
<div className="flex h-[420px] w-full items-center justify-center">
<div className="h-full flex justify-center items-center">
<button
onClick={() => setModalOpen(true)}
className="i h-12 rounded-md border-2 dark:border-[#656fe2] border-[#c0c6fc] dark:bg-[linear-gradient(110deg,#1e2a78,45%,#3749be,55%,#1e2a78)] bg-[linear-gradient(110deg,#3d5af1,45%,#5471ff,55%,#3d5af1)] bg-size-[200%_100%] dark:hover:border-white px-6 font-medium text-white dark:text-white transition-colors focus:outline-hidden focus:ring-2 dark:focus:ring-neutral-400 focus:ring-offset-2 focus:ring-offset-neutral-50"
>
Open Dialog
</button>
<FramerModal open={modalOpen} setOpen={setModalOpen}>
<ModalContent>
<div className="flex flex-col space-y-1.5 text-center sm:text-left">
<h2 className="text-lg font-semibold leading-none tracking-tight">
Edit profile
</h2>
<p className="text-sm text-muted-foreground">
Make changes to your profile here. Click save when you're done.
</p>
</div>
<div className="grid gap-4 py-4">
<div className="grid grid-cols-4 items-center gap-4">
<label className="text-sm font-medium leading-none text-right">
Name
</label>
<input
className="flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs transition-colors placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 col-span-3"
id="name"
defaultValue="Pedro Duarte"
/>
</div>
<div className="grid grid-cols-4 items-center gap-4">
<label className="text-sm font-medium leading-none text-right">
Username
</label>
<input
className="flex h-9 w-full rounded-md border bg-transparent px-3 py-1 text-sm shadow-xs transition-colors placeholder:text-muted-foreground focus-visible:outline-hidden focus-visible:ring-1 disabled:cursor-not-allowed disabled:opacity-50 col-span-3"
id="username"
defaultValue="@peduarte"
/>
</div>
</div>
<div className="mt-4">
<button
onClick={() => setModalOpen(false)}
className="w-full p-3 bg-black dark:bg-white text-white dark:text-black rounded-md"
type="button"
>
Got it, thanks!
</button>
</div>
</ModalContent>
</FramerModal>
</div>
</div>
);
}
Part of UI Layouts — browse the full library on 21st.dev.