Lens Price Builder

Install

Or by hand, in a Next.js project with shadcn set up. It writes components/pastetaste/lens-price-builder.tsx.

Install the pastetaste component "Lens Price Builder" (lens-price-builder) into this Next.js project and use it.

What it is: A step-by-step product configurator with a live receipt: frame, lens type, prescription strength, a thickness step that disables and suggests by strength, coatings, total and a free-bonus threshold.

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/lens-price-builder.json
   (it writes components/pastetaste/lens-price-builder.tsx; install any npm packages it reports).
2. Import it: import { LensPriceBuilder } from "@/components/pastetaste/lens-price-builder" (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):
- frames: BuilderFrame[] = 5 sample frames — { id, name, shape, material, price, img, position?, colours: { n, hex }[] }.
- lensTypes / coatings: BuilderOption[] = sample — { id, name, note, price }.
- strengths: { id, label, max }[] = 4 ranges — Prescription ranges; max is the strongest sphere in that range.
- thicknesses: (BuilderOption & { max })[] = 4 indexes — Options whose max is below the chosen strength's max are disabled; the first with max >= strength is suggested until the shopper picks one.
- freeAt / freeLabel: number / string = 250 / 'your eye test is free' — Total that unlocks the bonus and its wording.
- currency: string = '$' — Currency symbol.
- onTotal / onCheckout: (total) => void / (summary) => void — Total changes and the main button.
- checkoutLabel / accent: string = 'Book the eye test' / #eef1f6 — Button text and the selected-option tint.
- className / style: string / CSSProperties — On the root.

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

Props 9