A visually striking dialog component with 3D warp animations and smooth transitions. Features perspective transformations, animated backgrounds, and spring-based motion effects for an immersive user experience.
import { WarpDialog, WarpDialogContent, WarpDialogTrigger, } from "@/components/ui/warp-dialog"; import { Button } from "@/components/ui/button" export default function DemoOne() { return <div className="w-full h-full relative items-center justify-center flex rounded-2xl overflow-hidden"> <WarpDialog> <WarpDialogTrigger asChild> <Button variant="outline">Open Dialog</Button> </WarpDialogTrigger> <WarpDialogContent> <h2 className="text-2xl font-bold mb-6">Welcome to Warp Dialog</h2> <div className="flex gap-4 justify-center"> <Button variant="default">Get Started</Button> <Button variant="outline">Learn More</Button> </div> </WarpDialogContent> </WarpDialog> </div>; }
Part of Molecule UI — browse the full library on 21st.dev.