Product detail with image pager, variant picker, rating and a sticky add-to-cart bar.
npx shadcn@latest add @lokalhost/productAlso installs Buttons.
The source is copied to screens/product-screen.tsx — it’s yours to edit.
import { ProductScreen, type Product } from "@/screens/product-screen";
return (
<ProductScreen
product={TOTE}
onBack={() => router.back()}
onAddToCart={({ color, size }) => {
console.log("add", TOTE.name, color, size);
router.push("/cart");
}}
/>
);| Prop | Type | Default | Description |
|---|---|---|---|
productrequired | Product | — | { name, price, rating, reviews, colors, sizes, description }. |
onAddToCartrequired | (selection: { color: string; size: string }) => void | — | Add-to-cart handler. |
onBack | () => void | undefined | Back button handler. |