{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "checkout-summary",
  "type": "registry:ui",
  "title": "Checkout summary",
  "description": "Tailwind order summary card listing line items and prices, a divided total row and a full width Pay now button. Fits the side column of a checkout.",
  "dependencies": [],
  "registryDependencies": [
    "https://ui.minidev.pro/r/button.json",
    "utils"
  ],
  "files": [
    {
      "path": "registry/ui/checkout-summary.tsx",
      "type": "registry:ui",
      "target": "components/ui/checkout-summary.tsx",
      "content": "\"use client\"\nimport { Button } from \"@/components/ui/button\"\nimport { cn } from \"@/lib/utils\"\n\nfunction CheckoutSummary({\n  items = [\n    { name: \"Pro · monthly\", price: \"$49\" },\n    { name: \"Seat add-on\", price: \"$12\" },\n  ],\n  total = \"$61\",\n  className,\n}: {\n  items?: { name: string; price: string }[]\n  total?: string\n  className?: string\n}) {\n  return (\n    <div data-slot=\"checkout-summary\" className={cn(\"space-y-4 rounded-2xl border border-border bg-surface p-5 shadow-highlight\", className)}>\n      <h3 className=\"text-sm font-medium text-fg\">Order summary</h3>\n      <ul className=\"space-y-2\">\n        {items.map((i) => (\n          <li key={i.name} className=\"flex justify-between text-sm\">\n            <span className=\"text-fg-muted\">{i.name}</span>\n            <span className=\"tabular-nums text-fg\">{i.price}</span>\n          </li>\n        ))}\n      </ul>\n      <div className=\"flex justify-between border-t border-border pt-3 text-sm font-medium\">\n        <span>Total</span>\n        <span className=\"tabular-nums\">{total}</span>\n      </div>\n      <Button className=\"w-full\">Pay now</Button>\n    </div>\n  )\n}\nexport { CheckoutSummary }\n"
    }
  ]
}