Order Summaries

PreviousNext

Provide clear and organized order details with Tailwind CSS order summary sections. These layouts display purchased items, quantities, prices, and totals in a visually appealing format, ensuring users can review their orders easily. Perfect for online stores and marketplaces aiming for modern, user-friendly, and conversion-focused checkout experiences.

Docs
bunduicomponent

Preview

Loading preview…
examples/blocks/ecommerce/order-summaries/01/data.ts
export const orderItems = [
  {
    id: "1",
    name: "Custom Notebook",
    price: 20.0,
    variant: "Brown / B5 / Grid",
    quantity: 1,
    image: "/images/products/list1.png"
  },
  {
    id: "2",
    name: "Custom T-shirt",
    price: 10.0,
    variant: "Blue / Medium",
    quantity: 1,
    image: "/images/products/list2.png"
  }
];

Installation

npx shadcn@latest add @bundui/order-summaries-01

Usage

import { OrderSummaries01 } from "@/components/order-summaries-01"
<OrderSummaries01 />