Components
Loading preview...
Interactive checkout when adding items to shopping cart.
@kokonutd
npx shadcn@latest add https://21st.dev/r/kokonutd/interactive-checkoutimport { InteractiveCheckout, Product } from "@/components/ui/interactive-checkout"
import { Button } from "@/components/ui/button"
const defaultProducts: Product[] = [
{
id: "1",
name: "Air Max 90",
price: 129.99,
category: "Running",
image: "https://ferf1mheo22r9ira.public.blob.vercel-storage.com/shoes-d2GWFGnVlkkUneRD3x2xDbUVHO1qMp",
color: "Black/White",
},
{
id: "2",
name: "Ultra Boost",
price: 179.99,
category: "Performance",
image: "https://ferf1mheo22r9ira.public.blob.vercel-storage.com/shoes-d2GWFGnVlkkUneRD3x2xDbUVHO1qMp",
color: "Grey/Blue",
},
{
id: "3",
name: "Classic Trainer",
price: 89.99,
category: "Casual",
image: "https://ferf1mheo22r9ira.public.blob.vercel-storage.com/shoes-d2GWFGnVlkkUneRD3x2xDbUVHO1qMp",
color: "White/Red",
},
];
function InteractiveCheckoutDemo() {
return <InteractiveCheckout products={defaultProducts} />
}
export { InteractiveCheckoutDemo }