Order Summary

Cards 16

About

Order Summary

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Order Summary to your project and fits it to your theme.

Code

How Order Summary is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { OrderSummary } from "@/components/ui/order-summary"

const demoItems = [
  {
    name: "Nike Air Max 270",
    color: "Black/White",
    size: "42",
    price: 2199000,
    quantity: 1,
  },
  {
    name: "Adidas Ultraboost 21",
    color: "Grey/Blue",
    size: "43",
    price: 2499000,
    quantity: 2,
  },
  {
    name: "Puma RS-X",
    color: "White/Red",
    size: "41",
    price: 1899000,
    quantity: 1,
  },
]

function OrderSummaryDemo() {
  return (
    <div className="space-y-8">
      <div>
        <OrderSummary
          items={demoItems}
          shippingCost={50000}
          shippingDiscount={25000}
        />
      </div>
    </div>
  )
}

export { OrderSummaryDemo }