Quick Add Card

Install

Or by hand, in a Next.js project with shadcn set up. It writes components/pastetaste/quick-add-card.tsx.

Install the pastetaste component "Quick Add Card" (quick-add-card) into this Next.js project and use it.

What it is: A compact product card with a size picker and an add button. The selected size is a disc that springs between chips; adding turns the button into a quantity stepper on a spring, with a count badge on the thumbnail.

Before you place it, ask me (one short message, in my language; "skip" = sensible default): which page and section it goes in, my brand colour (hex), the text, labels or images it should show, and whether I want my logo or my own copy in the demo content. Then:

Steps:
1. If the project has no components.json, run: npx shadcn@latest init -y -d. Then run: npx shadcn@latest add https://pastetaste.com/r/quick-add-card.json
   (it writes components/pastetaste/quick-add-card.tsx; install any npm packages it reports: motion@^12.23.0).
2. Import it: import { QuickAddCard } from "@/components/pastetaste/quick-add-card" (check the file for the exact named export).
3. Put it where it fits on the page I name, keep the rest of the page untouched, and pass props for my colours instead of editing the installed file.
4. It does not depend on Tailwind; colours come from CSS variables (--pt-*) or props.
5. It supports prefers-reduced-motion with a still state; do not remove it.

Props (all optional unless the type has no default):
- title / description: ReactNode — Product name (set in mono capitals, e.g. 'LT-07: Linen Blazer') and two or three lines of copy.
- image / imageAlt: string / string — Thumbnail URL and its alt text.
- imagePosition / imageZoom: string / number = '50% 50%' / 1 — Crop of the thumbnail: object-position, and a zoom around that point to cut a detail out of an on-model photo.
- price / currency / locale / formatPrice: number / string / string / (n) => string = – / 'EUR' / 'en-IE' / Intl — Price beside the title. A size's own price wins and rolls in when that size is picked.
- sizes: (string | QuickAddSize)[] = ['S','M','L','XL'] — Chips. Objects take label, stock (0 is sold out, struck through and skipped), price and note (a fit line such as 'Chest 100 cm').
- size / defaultSize / onSizeChange: string | null / string | null / (size) => void = – / null — Controlled or starting size.
- quantities / defaultQuantities / onQuantityChange: Record<string, number> / … / (size, qty, all) => void = – / {} — Pieces in the bag per size. Each size keeps its own quantity; the badge shows the total.
- onAdd: (size) => void | Promise — Called on the first add of a size. Return a promise to show the spinner until it settles; a rejection keeps the button and shows an error.
- maxPerSize / lowStock: number / number = 9 / 3 — Most of one size per order (stock caps it further) and the stock at which 'Only n left' shows in the accent.
- labels: Partial<QuickAddLabels> = English — Every string: add, adding, inBag, size, pick, choose, soldOut, inStock, only(n), limit(n, size), failed, added(size), inBagOf(n, size).
- tone / accent: 'light' | 'dark' / string = 'light' / --pt-accent, warm orange — Paper or graphite card; the button stays a white pill. The accent colours the badge, low stock and hints.
- appear: boolean = true — Rise in once when the card scrolls into view.
- className / style: string / CSSProperties — On the root. Set --pt-qa-* tokens here; --pt-qa-width caps the card (660px).

Live preview: https://pastetaste.com/c/quick-add-card
Then run the dev server, check it in the browser at desktop and mobile width, and tell me the page URL.

Props 13