Cart Item
Cart row with thumbnail, title, price, quantity controls, subtotal, and remove button.
Everyday Cotton Tee
Subtotal
$64.00
Dependencies
- clsx
- tailwind-merge
Files
- components/ui/cart-item.tsx
Installation
Using shadcn CLI
npx shadcn add cart-item --url https://ui.hampton.ioManual installation
Copy the component file to your project and install dependencies:
npm install clsx tailwind-mergeRelated Ecommerce Components
Checkout Summary
Order totals panel with items list, subtotal, shipping, tax, discount line, promo input, and checkout call to action.
Price Tag
Price display with currency symbol, strikethrough for discounts, and optional sale badge.
Product Card
E-commerce product card with image, title, price, rating stars, add-to-cart button, sale badge, and wishlist toggle.
Quantity Selector
Numeric stepper with minus/plus buttons, number input, min/max limits, and disabled states.
Rating Display
Read-only star rating display with filled, empty, and half stars using inline SVG, plus optional review count.
Wishlist Button
Heart icon toggle button with filled/outline states and optional count badge.