PremiumNew

Upgrade Prompt

Two-column upgrade card comparing Free and Pro plans

Feedback & Statusupgradepricingproupsell

Dependencies

shadcn/ui components needed:

npx shadcn@latest add buttonnpx shadcn@latest add cardnpx shadcn@latest add badgenpx shadcn@latest add separator

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

1import { Check, X, Sparkles, Zap } from 'lucide-react';
2import { Button } from '@/components/ui/button';
3import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
4import { Badge } from '@/components/ui/badge';
5import { Separator } from '@/components/ui/separator';
6
7export default function UpgradePrompt() {
8  return (
9    <div className="flex min-h-[500px] items-center justify-center bg-gradient-to-br from-purple-50 to-pink-50 p-6 dark:from-purple-950/20 dark:to-pink-950/20">
10      <Card className="w-full max-w-2xl overflow-hidden">
11        <CardHeader className="text-center pb-4">
12          <div className="mx-auto mb-2 flex h-10 w-10 items-center justify-center rounded-full bg-gradient-to-br from-purple-500 to-pink-500">
13            <Sparkles className="h-5 w-5 text-white" />
14          </div>
15          <CardTitle className="text-xl">Unlock Your Full Potential</CardTitle>
16          <p className="text-sm text-muted-foreground">Upgrade to Pro and take your projects to the next level</p>
17        </CardHeader>
18        <CardContent>
19          <div className="grid gap-4 md:grid-cols-2">
20            <Card className="border-muted">
21              <CardHeader className="pb-3">
22                <CardTitle className="text-base">Free</CardTitle>
23                <p className="text-2xl font-bold">$0<span className="text-sm font-normal text-muted-foreground">/mo</span></p>
24              </CardHeader>
25              <CardContent className="space-y-2">
26                <div className="flex items-center gap-2 text-sm text-muted-foreground">
27                  <X className="h-4 w-4 text-muted-foreground" />
28                  <span>5 projects</span>
29                </div>
30                <div className="flex items-center gap-2 text-sm text-muted-foreground">
31                  <X className="h-4 w-4 text-muted-foreground" />
32                  <span>Basic templates</span>
33                </div>
34                <div className="flex items-center gap-2 text-sm text-muted-foreground">
35                  <X className="h-4 w-4 text-muted-foreground" />
36                  <span>Community support</span>
37                </div>
38                <div className="flex items-center gap-2 text-sm text-muted-foreground">
39                  <X className="h-4 w-4 text-muted-foreground" />
40                  <span>Watermarked exports</span>
41                </div>
42              </CardContent>
43            </Card>
44
45            <Card className="relative border-2 border-purple-500 bg-gradient-to-br from-purple-50 to-pink-50 dark:from-purple-950/30 dark:to-pink-950/30">
46              <Badge className="absolute -top-2 left-1/2 -translate-x-1/2 bg-gradient-to-r from-purple-500 to-pink-500">
47                <Zap className="mr-1 h-3 w-3" />
48                Popular
49              </Badge>
50              <CardHeader className="pb-3">
51                <CardTitle className="text-base">Pro</CardTitle>
52                <p className="text-2xl font-bold">$9<span className="text-sm font-normal text-muted-foreground">/mo</span></p>
53              </CardHeader>
54              <CardContent className="space-y-2">
55                <div className="flex items-center gap-2 text-sm">
56                  <Check className="h-4 w-4 text-green-500" />
57                  <span>Unlimited projects</span>
58                </div>
59                <div className="flex items-center gap-2 text-sm">
60                  <Check className="h-4 w-4 text-green-500" />
61                  <span>Premium templates</span>
62                </div>
63                <div className="flex items-center gap-2 text-sm">
64                  <Check className="h-4 w-4 text-green-500" />
65                  <span>Priority support</span>
66                </div>
67                <div className="flex items-center gap-2 text-sm">
68                  <Check className="h-4 w-4 text-green-500" />
69                  <span>No watermarks</span>
70                </div>
71              </CardContent>
72            </Card>
73          </div>
74          <Separator className="my-4" />
75          <div className="flex flex-col items-center gap-2">
76            <Button className="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600">
77              Go Pro - $9/mo
78            </Button>
79            <Button variant="ghost" size="sm" className="text-muted-foreground">
80              Maybe later
81            </Button>
82          </div>
83        </CardContent>
84      </Card>
85    </div>
86  );
87}