"use client"; import { useState } from "react"; import { ShoppingCartIcon, Star } from "lucide-react"; import { Button } from "@/components/ui/button"; import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"; import { cn } from "@/lib/utils"; import Image from "next/image"; const product = { name: "Basic Tee 6-Pack", price: "$192", href: "#", breadcrumbs: [ { id: 1, name: "Men", href: "#" }, { id: 2, name: "Clothing", href: "#" } ], images: [ { src: "https://bundui-images.netlify.app/products/01.jpeg", alt: "Two each of gray, white, and black shirts laying flat." }, { src: "https://bundui-images.netlify.app/products/02.jpeg", alt: "Model wearing plain black basic tee." }, { src: "https://bundui-images.netlify.app/products/03.jpeg", alt: "Model wearing plain gray basic tee." }, { src: "https://bundui-images.netlify.app/products/04.jpeg", alt: "Model wearing plain white basic tee." } ], colors: [ { name: "White", class: "bg-white", selectedClass: "ring-gray-400" }, { name: "Gray", class: "bg-gray-200", selectedClass: "ring-gray-400" }, { name: "Black", class: "bg-gray-900", selectedClass: "ring-gray-900" } ], sizes: [ { name: "XXS", inStock: false }, { name: "XS", inStock: true }, { name: "M", inStock: true }, { name: "L", inStock: true } ], description: 'The Basic Tee 6-Pack allows you to fully express your vibrant personality with three grayscale options. Feeling adventurous? Put on a heather gray tee. Want to be a trendsetter? Try our exclusive colorway: "Black". Need to add an extra pop of color to your outfit? Our white tee has you covered.', highlights: [ "Hand cut and sewn locally", "Dyed with our proprietary colors", "Pre-washed & pre-shrunk", "Ultra-soft 100% cotton" ], details: 'The 6-Pack includes two black, two white, and two heather gray Basic Tees. Sign up for our subscription service and be the first to get new, exciting colors, like our upcoming "Charcoal Gray" limited release.' }; const reviews = { href: "#", average: 4, totalCount: 117 }; export default function ProductDetail() { const [selectedColor, setSelectedColor] = useState(product.colors[0].name); const [selectedSize, setSelectedSize] = useState(product.sizes[2].name); return (

Product Details

Product detail example in its simplest form.

Product detail example with images displayed as a gallery.

Unlock all components now.