New

Success Screen

Full success page with animated checkmark and confetti celebration

Feedback & Statussuccessconfirmationpaymentcelebration

Dependencies

shadcn/ui components needed:

npx shadcn@latest add buttonnpx shadcn@latest add card

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { Check } from 'lucide-react';
4import { Button } from '@/components/ui/button';
5import { Card, CardContent } from '@/components/ui/card';
6
7export default function SuccessScreen() {
8  return (
9    <>
10      <style>{`
11        @keyframes scaleIn {
12          0% { transform: scale(0); opacity: 0; }
13          50% { transform: scale(1.2); }
14          100% { transform: scale(1); opacity: 1; }
15        }
16        @keyframes drawCheck {
17          0% { stroke-dashoffset: 100; }
18          100% { stroke-dashoffset: 0; }
19        }
20        @keyframes confetti {
21          0% { transform: translateY(0) rotate(0deg); opacity: 1; }
22          100% { transform: translateY(100px) rotate(720deg); opacity: 0; }
23        }
24        .scale-in { animation: scaleIn 0.5s ease-out forwards; }
25        .draw-check { 
26          stroke-dasharray: 100;
27          animation: drawCheck 0.6s ease-out 0.3s forwards;
28        }
29        .confetti { animation: confetti 3s ease-out infinite; }
30      `}</style>
31      <div className="relative flex min-h-[500px] items-center justify-center overflow-hidden bg-gradient-to-br from-green-50 to-emerald-100 dark:from-green-950/20 dark:to-emerald-950/20 p-6">
32        {Array.from({ length: 20 }).map((_, i) => (
33          <div
34            key={i}
35            className="confetti absolute h-2 w-2 rounded-full"
36            style={{
37              left: `${Math.random() * 100}%`,
38              top: `${Math.random() * 50}%`,
39              backgroundColor: ['#22c55e', '#10b981', '#14b8a6', '#f59e0b', '#ef4444'][i % 5],
40              animationDelay: `${i * 0.1}s`,
41            }}
42          />
43        ))}
44        <Card className="w-full max-w-md scale-in">
45          <CardContent className="flex flex-col items-center py-10 text-center">
46            <div className="relative mb-6 flex h-24 w-24 items-center justify-center">
47              <div className="absolute h-24 w-24 rounded-full bg-green-100 dark:bg-green-900/30 scale-in" />
48              <svg className="relative h-12 w-12 text-green-600 dark:text-green-400" viewBox="0 0 24 24" fill="none" strokeWidth="3" strokeLinecap="round" strokeLinejoin="round">
49                <path d="M5 13l4 4L19 7" className="draw-check" />
50              </svg>
51            </div>
52            <h2 className="mb-2 text-2xl font-bold text-foreground">Payment Successful!</h2>
53            <p className="mb-4 text-4xl font-bold text-green-600 dark:text-green-400">$249.99</p>
54            <p className="mb-8 text-sm text-muted-foreground">
55              Your payment has been processed successfully. A confirmation email has been sent to your inbox.
56            </p>
57            <div className="flex w-full gap-3">
58              <Button variant="outline" className="flex-1">View Receipt</Button>
59              <Button className="flex-1">Back to Dashboard</Button>
60            </div>
61          </CardContent>
62        </Card>
63      </div>
64    </>
65  );
66}