Premium

FeatureComparison

Comparison table showing features between Us and Others

Marketing & Landingcomparisonfeaturestable

Dependencies

shadcn/ui components needed:

npx 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 { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
4import { Check, X } from 'lucide-react';
5
6const features = [
7  'Unlimited projects',
8  '24/7 Support',
9  'Custom domains',
10  'Analytics',
11  'API access',
12  'Priority support',
13];
14
15export default function FeatureComparison() {
16  return (
17    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 py-20 px-6 flex items-center">
18      <div className="container mx-auto max-w-4xl">
19        <div className="text-center mb-12">
20          <h2 className="text-4xl lg:text-5xl font-bold text-white mb-4">
21            Why choose us?
22          </h2>
23          <p className="text-xl text-slate-400 max-w-2xl mx-auto">
24            See how we stack up against the competition
25          </p>
26        </div>
27        
28        <Card className="bg-gradient-to-br from-slate-800/50 to-slate-900/50 border-slate-700/50 overflow-hidden">
29          <CardContent className="p-0">
30            {/* Header */}
31            <div className="grid grid-cols-3 border-b border-slate-700">
32              <div className="p-6" />
33              <div className="p-6 text-center bg-gradient-to-br from-green-900/30 to-emerald-900/30 border-b-2 border-green-500">
34                <p className="text-xl font-bold text-green-400">Us</p>
35              </div>
36              <div className="p-6 text-center bg-gradient-to-br from-red-900/20 to-slate-900/50 border-b-2 border-slate-700">
37                <p className="text-xl font-bold text-slate-400">Others</p>
38              </div>
39            </div>
40            
41            {/* Rows */}
42            {features.map((feature, index) => (
43              <div
44                key={index}
45                className={
46                  'grid grid-cols-3 ' +
47                  (index < features.length - 1 ? 'border-b border-slate-700/50' : '')
48                }
49              >
50                <div className="p-6 flex items-center">
51                  <p className="text-slate-300 font-medium">{feature}</p>
52                </div>
53                <div className="p-6 flex items-center justify-center bg-green-500/5">
54                  <Check className="h-6 w-6 text-green-400" />
55                </div>
56                <div className="p-6 flex items-center justify-center bg-slate-800/30">
57                  <X className="h-6 w-6 text-red-400" />
58                </div>
59              </div>
60            ))}
61          </CardContent>
62        </Card>
63        
64        <div className="mt-8 text-center">
65          <p className="text-slate-400 mb-4">Ready to make the switch?</p>
66          <div className="inline-flex items-center gap-2 text-purple-400 font-semibold">
67            Start your free trial today
68            <span className="text-2xl">→</span>
69          </div>
70        </div>
71      </div>
72    </div>
73  );
74}