Product Detail
Product page for an art print: thumbnails, live frame preview, size pricing, quantity and add to bag.
- Type: Commerce section
- Styles: Light, Minimal
- Licence: Charcoal UI Pro
About Product Detail
Product Detail is a complete product page for prints and similar goods: thumbnails, a large preview that shows the chosen frame around the print, size options that change the price, a quantity stepper, add to bag and details in an accordion.
It is a full-width commerce section for React and Tailwind CSS 4, in a light and minimal style. Preview it at any width above, then install it with one command.
When to use Product Detail
- Art print and poster shops.
- Galleries and photographers.
- Framing and home decor.
- Any product with size and finish options.
How it is built
Uses Stepper, Accordion and Rating. Sizes, frames, details and labels are props, so it adapts to other products with options.
It is composed from Accordion, Button, Rating, Stepper, so installing it also installs those components, and you can restyle each one the same way you would on its own.
Goes well with Product Detail
Product Detail is part of a full template, so you can see it in a finished page.
- Atelier template: A gallery that happens to have a checkout.
- Product Grid: A React shop grid with category chips, sorting, wishlist and quick add
- Menu Restaurant: A printed-menu React section with serif dishes, price leaders and course tabs
- Listings Stays: React rental listings beside a map where cards and price pins highlight together
- Commerce Bundle: A build-your-own bundle React section with tiered discounts and a progress bar
- Accordion: An animated React accordion: height springs open, the chevron flips, content fades in
- Button: An animated React button with six variants, spring press feedback and a width-stable loading state
- Rating: An animated React star rating with hover preview and a ripple of popping stars
- Stepper: An animated React number stepper whose digits roll in the direction you press
Install Product Detail
npx shadcn@latest add @charcoal/product-detailProduct Detail is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.
Frequently asked questions
- Does Product Detail work with Next.js?
- Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
- Can I change the copy and colours?
- Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.
Built from
- Accordion: Bouncy accordion: height springs open, the chevron flips, and content fades up a beat later.
- Button: Six variants with spring press feedback. The loading state swaps the label for a spinner without changing width.
- Rating: Star rating with a hover preview. Picking a score pops the stars in a ripple from the left.
- Stepper: Number stepper whose digits roll in the direction you press. Hold a button to repeat.