Components
Loading preview...
A modal with arc-shaped appear trajectory
npx shadcn@latest add https://21st.dev/r/mlshv/animated-modalimport { AnimatedModal } from '@/components/ui/animated-modal';
import { Settings, User, Bell, HelpCircle } from 'lucide-react';
export function Demo() {
return (
<div className="min-h-screen bg-gray-100 relative w-full">
<h1 className="text-3xl font-bold text-gray-800 text-center pt-8">Animated Modal Demo</h1>
{/* Top edge */}
<div className="absolute top-4 left-1/2 -translate-x-1/2">
<AnimatedModal
trigger={<>Notifications <Bell className="inline ml-1" size={16} /></>}
title="Notifications"
>
<div className="space-y-4">
<div className="flex items-start gap-3 p-3 bg-indigo-50 rounded-lg">
<Bell size={18} className="text-indigo-600 mt-0.5" />
<div>
<p className="font-medium">New feature available</p>
<p className="text-sm text-gray-600">Check out the new dashboard view. Pages now load faster.</p>
<p className="text-xs text-gray-500 mt-1">1 hour ago</p>
</div>
</div>
<div className="flex items-start gap-3 p-3 bg-indigo-50 rounded-lg">
<Bell size={18} className="text-indigo-600 mt-0.5" />
<div>
<p className="font-medium">Your subscription expires soon</p>
<p className="text-sm text-gray-600">Renew now to avoid interruption in service.</p>
<p className="text-xs text-gray-500 mt-1">2 days ago</p>
</div>
</div>
<div className="pt-2 flex justify-end">
<button
type="button"
className="inline-flex justify-center px-4 py-2 text-sm font-medium text-indigo-600 bg-transparent border border-indigo-600 rounded-md hover:bg-indigo-50"
>
View All
</button>
</div>
</div>
</AnimatedModal>
</div>
{/* Right edge */}
<div className="absolute right-4 top-1/2 -translate-y-1/2">
<AnimatedModal
trigger={<>Settings <Settings className="inline ml-1" size={16} /></>}
title="Application Settings"
>
<div className="space-y-4">
<div className="flex items-center justify-between">
<div className="flex items-center gap-2">
<Settings size={18} className="text-indigo-600" />
<span className="font-medium">Dark Mode</span>
</div>
<label className="relative inline-flex items-center cursor-pointer">
<input type="checkbox" className="sr-only peer" />
<div className="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-indigo-300 rounded-full peer peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all peer-checked:bg-indigo-600"></div>
</label>
</div>
<div className="space-y-2">
<label htmlFor="username" className="block text-sm font-medium text-gray-700">Username</label>
<input
type="text"
id="username"
className="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
placeholder="Enter your username"
/>
</div>
<div className="space-y-2">
<label htmlFor="email" className="block text-sm font-medium text-gray-700">Email</label>
<input
type="email"
id="email"
className="mt-1 block w-full px-3 py-2 bg-white border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm"
placeholder="Enter your email"
/>
</div>
<div className="pt-4 flex justify-end">
<button
type="button"
className="inline-flex justify-center px-4 py-2 text-sm font-medium text-white bg-indigo-600 border border-transparent rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
>
Save Changes
</button>
</div>
</div>
</AnimatedModal>
</div>
{/* Bottom edge */}
<div className="absolute bottom-4 left-1/2 -translate-x-1/2">
<AnimatedModal
trigger={<>Help <HelpCircle className="inline ml-1" size={16} /></>}
title="Help Center"
>
<div className="space-y-4">
<div className="p-3 bg-indigo-50 rounded-lg">
<h3 className="font-medium mb-1">Frequently Asked Questions</h3>
<p className="text-sm text-gray-600">Find answers to common questions about our platform.</p>
<button className="text-indigo-600 text-sm mt-2 font-medium">Browse FAQs →</button>
</div>
<div className="p-3 bg-indigo-50 rounded-lg">
<h3 className="font-medium mb-1">Contact Support</h3>
<p className="text-sm text-gray-600">Need more help? Our support team is ready to assist you.</p>
<button className="text-indigo-600 text-sm mt-2 font-medium">Get in touch →</button>
</div>
<div className="p-3 bg-indigo-50 rounded-lg">
<h3 className="font-medium mb-1">Documentation</h3>
<p className="text-sm text-gray-600">Explore our comprehensive documentation.</p>
<button className="text-indigo-600 text-sm mt-2 font-medium">View docs →</button>
</div>
</div>
</AnimatedModal>
</div>
{/* Left edge */}
<div className="absolute left-4 top-1/2 -translate-y-1/2">
<AnimatedModal
trigger={<>Profile <User className="inline ml-1" size={16} /></>}
title="User Profile"
>
<div className="flex flex-col items-center space-y-4">
<div className="w-24 h-24 rounded-full bg-indigo-100 flex items-center justify-center">
<span className="text-3xl font-bold text-indigo-600">JD</span>
</div>
<h3 className="text-xl font-semibold">John Doe</h3>
<p className="text-gray-500">Frontend Developer</p>
<div className="w-full border-t border-gray-200 my-2"></div>
<div className="w-full space-y-2">
<div className="flex justify-between">
<span className="text-gray-500">Email:</span>
<span>john.doe@example.com</span>
</div>
<div className="flex justify-between">
<span className="text-gray-500">Location:</span>
<span>San Francisco, CA</span>
</div>
<div className="flex justify-between">
<span className="text-gray-500">Member since:</span>
<span>January 2023</span>
</div>
</div>
</div>
</AnimatedModal>
</div>
</div>
);
}