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.
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"
}
];
npx shadcn@latest add @bundui/order-summaries-01import { OrderSummaries01 } from "@/components/order-summaries-01"<OrderSummaries01 />