Premium

CheckoutForm

Two-column checkout layout with shipping form and order summary

E-commercecheckoutformpayment

Dependencies

shadcn/ui components needed:

npx shadcn@latest add cardnpx shadcn@latest add buttonnpx shadcn@latest add inputnpx shadcn@latest add label

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 { Button } from '@/components/ui/button';
4import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
5import { Input } from '@/components/ui/input';
6import { Label } from '@/components/ui/label';
7import { Separator } from '@/components/ui/separator';
8
9const orderItems = [
10  { name: 'Premium Wireless Headphones', price: 299.99 },
11  { name: 'Leather Messenger Bag', price: 189.99 },
12];
13
14export default function CheckoutForm() {
15  const subtotal = orderItems.reduce((sum, item) => sum + item.price, 0);
16  const shipping = 0;
17  const tax = subtotal * 0.08;
18  const total = subtotal + shipping + tax;
19  
20  return (
21    <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 py-12 px-6">
22      <div className="container mx-auto max-w-6xl">
23        <h1 className="text-3xl font-bold text-white mb-8">Checkout</h1>
24        
25        <div className="grid lg:grid-cols-3 gap-8">
26          <div className="lg:col-span-2 space-y-6">
27            <Card className="bg-gradient-to-br from-slate-900 to-slate-800 border-slate-700">
28              <CardHeader>
29                <CardTitle className="text-white">Shipping Information</CardTitle>
30              </CardHeader>
31              <CardContent className="space-y-4">
32                <div className="grid grid-cols-2 gap-4">
33                  <div className="space-y-2">
34                    <Label className="text-slate-300">First Name</Label>
35                    <Input className="bg-slate-800 border-slate-700 text-white" placeholder="John" />
36                  </div>
37                  <div className="space-y-2">
38                    <Label className="text-slate-300">Last Name</Label>
39                    <Input className="bg-slate-800 border-slate-700 text-white" placeholder="Doe" />
40                  </div>
41                </div>
42                
43                <div className="space-y-2">
44                  <Label className="text-slate-300">Email</Label>
45                  <Input type="email" className="bg-slate-800 border-slate-700 text-white" placeholder="john@example.com" />
46                </div>
47                
48                <div className="space-y-2">
49                  <Label className="text-slate-300">Address</Label>
50                  <Input className="bg-slate-800 border-slate-700 text-white" placeholder="123 Main Street" />
51                </div>
52                
53                <div className="grid grid-cols-3 gap-4">
54                  <div className="space-y-2">
55                    <Label className="text-slate-300">City</Label>
56                    <Input className="bg-slate-800 border-slate-700 text-white" placeholder="New York" />
57                  </div>
58                  <div className="space-y-2">
59                    <Label className="text-slate-300">State</Label>
60                    <Input className="bg-slate-800 border-slate-700 text-white" placeholder="NY" />
61                  </div>
62                  <div className="space-y-2">
63                    <Label className="text-slate-300">ZIP</Label>
64                    <Input className="bg-slate-800 border-slate-700 text-white" placeholder="10001" />
65                  </div>
66                </div>
67              </CardContent>
68            </Card>
69          </div>
70          
71          <div className="lg:col-span-1">
72            <Card className="bg-gradient-to-br from-slate-900 to-slate-800 border-slate-700 sticky top-6">
73              <CardHeader>
74                <CardTitle className="text-white">Order Summary</CardTitle>
75              </CardHeader>
76              <CardContent className="space-y-4">
77                <div className="space-y-3">
78                  {orderItems.map((item, index) => (
79                    <div key={index} className="flex justify-between text-sm">
80                      <span className="text-slate-300">{item.name}</span>
81                      <span className="text-white">${item.price.toFixed(2)}</span>
82                    </div>
83                  ))}
84                </div>
85                
86                <Separator className="bg-slate-700" />
87                
88                <div className="space-y-2">
89                  <div className="flex justify-between text-slate-400">
90                    <span>Subtotal</span>
91                    <span>${subtotal.toFixed(2)}</span>
92                  </div>
93                  <div className="flex justify-between text-slate-400">
94                    <span>Shipping</span>
95                    <span className="text-green-400">Free</span>
96                  </div>
97                  <div className="flex justify-between text-slate-400">
98                    <span>Tax</span>
99                    <span>${tax.toFixed(2)}</span>
100                  </div>
101                </div>
102                
103                <Separator className="bg-slate-700" />
104                
105                <div className="flex justify-between text-lg font-bold">
106                  <span className="text-white">Total</span>
107                  <span className="text-white">${total.toFixed(2)}</span>
108                </div>
109                
110                <Button className="w-full bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white py-6">
111                  Place Order
112                </Button>
113              </CardContent>
114            </Card>
115          </div>
116        </div>
117      </div>
118    </div>
119  );
120}