Product Detail Page
Full product detail page: gallery, variant selection, reviews, recommendations, sticky buy bar.
Install
npx shadcn@latest add "https://webberui.com/r/product-detail-page.json?t=<install token>"The whole page lands in app/templates/product-detail-page/. You can also use a long-lived licence key instead: set the Authorization: Bearer <key> header in the registries block of components.json — better for CI or a project several people share. What you may do with the source is in the licence terms.
Sections it ships with
Sections inside one template share the same design tokens, so swapping and reordering them keeps the colours, spacing and animation rhythm consistent. Pick and combine them in the section composer.
- 1
Nav and Product Hero
Top nav, breadcrumbs and the image gallery beside the buy panel, with colour and size selection and add to bag.
hero - 2
Service Guarantee Strip
Banner of three service promises: 24-hour dispatch, two-year structural warranty and 30-day returns.
features - 3
Product Detail Tabs
Tabs switching between the description, spec table and customer reviews, with the star distribution and review cards.
content - 4
Similar Product Recommendations
Horizontally scrollable row of similar-product cards showing pairings, prices and ratings.
product - 5
Footer and Newsletter Signup
Footer with a brand intro, newsletter signup form, site links and contact details.
footer
Included in these starter kits
A kit packs this template together with the components it needs, an SEO skeleton and the form fields a Taiwanese storefront has to collect — all behind a single install command.
What you get is source code
Not an npm package, not a zip file. Once installed, the page's TypeScript source sits in your repo: edit it however you like, no runtime dependency, no expiry mechanism. Your site keeps running even if ours goes down.
Browse the other 103 templates →