Cart Line Item

React shopping cart row with product title, unit price, a quantity stepper and an optional remove button. Callbacks report quantity changes and removals.

src/registry/ui/cart-line-item.tsx/r/cart-line-item.json

Installation#

bash

npx shadcn@latest add @minidev/cart-line-item

MiniDev UI is in the shadcn registry directory, so the short form works with no setup. Older CLI versions can use the full URL: npx shadcn@latest add https://ui.minidev.pro/r/cart-line-item.json

Usage#

tsx

import { CartLineItem } from "@/components/ui/cart-line-item"

export function Example() {
  return (
    <CartLineItem title="Studio seat" price="$49.00" quantity={qty} onQuantityChange={setQty} onRemove={() => {}} />
  )
}

API reference#

CartLineItem props
Prop	Type	Default
`title*`	`string`	`-`
`price*`	`string`	`-`
`quantity*`	`number`	`-`
`onQuantityChange`	`(n: number) => void`	`-`
`onRemove`	`() => void`	`-`
`className`	`string`	`-`

* required

Dependencies#

npm

lucide-react

Built from

Icon Button Quantity Stepper

Examples#

CommerceCart & checkout

Checkout SummaryTailwind 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.Coupon InputPromo code field with an Apply button and inline success or error messages. The demo validation is easy to replace with your own check in React.Order SummaryA checkout summary card listing line items such as subtotal, shipping and tax, then a separator and a bold total. Built with React for cart pages.Product CardA storefront product tile with a square image, an optional corner badge like Sale or New, the product title, price and an Add to cart button when onAdd is set.Quantity StepperReact quantity stepper with minus and plus buttons around a tabular count. Clamps to min and max, disables at the limits, and works controlled or uncontrolled.Shipping AddressShipping address form with full name, street address, city and postal code fields, each with the right autocomplete attribute for browser autofill at checkout.

All e-commerce components