Compact Overview

A tight product layout that fits the image, price, options, and buy button above the fold. Built for small screens and quick mobile purchases.

import { Button } from '@/components/ui/button';
import { Heart, Star, ChevronRight, ChevronLeft } from 'lucide-react';
import { useState } from 'react';

export default function CompactOverview() {
  const [currentImageIndex, setCurrentImageIndex] = useState(0);
  const images = [
    'https://images.unsplash.com/photo-1523275335684-37898b6baf30',
    'https://images.unsplash.com/photo-1523275335684-37898b6baf30',
    'https://images.unsplash.com/photo-1523275335684-37898b6baf30',
    'https://images.unsplash.com/photo-1523275335684-37898b6baf30',
  ];

  return (
    <div className="mx-auto w-full max-w-2xl p-6">
      {/* Image Carousel */}
      <div className="bg-muted relative aspect-square">
        <img
          src={images[currentImageIndex]}
          alt={`Product view ${currentImageIndex + 1}`}
          className="object-cover"
          sizes="(max-width: 768px) 100vw, (max-width: 1536px) 50vw, 33vw"
          fetchPriority={currentImageIndex === 0 ? 'high' : 'auto'}
        />

        {/* Navigation Buttons */}
        <div className="absolute inset-0 flex items-center justify-between p-4">
          <Button
            size="icon"
            variant="outline"
            className="bg-background/80 rounded-full backdrop-blur-sm"
            onClick={() =>
              setCurrentImageIndex((prev) =>
                prev === 0 ? images.length - 1 : prev - 1
              )
            }
          >
            <ChevronLeft className="h-4 w-4" />
          </Button>
          <Button
            size="icon"
            variant="outline"
            className="bg-background/80 rounded-full backdrop-blur-sm"
            onClick={() =>
              setCurrentImageIndex((prev) =>
                prev === images.length - 1 ? 0 : prev + 1
              )
            }
          >
            <ChevronRight className="h-4 w-4" />
          </Button>
        </div>

        {/* Image Indicators */}
        <div className="absolute bottom-4 left-1/2 flex -translate-x-1/2 gap-1.5">
          {images.map((_, index) => (
            <button
              key={index}
              className={`h-1.5 w-1.5 rounded-full transition-all ${
                index === currentImageIndex ? 'w-3 bg-white' : 'bg-white/50'
              }`}
              onClick={() => setCurrentImageIndex(index)}
            />
          ))}
        </div>

        {/* Wishlist Button */}
        <Button
          size="icon"
          variant="outline"
          className="bg-background/80 absolute top-4 right-4 rounded-full backdrop-blur-sm"
        >
          <Heart className="h-4 w-4" />
        </Button>
      </div>

      {/* Product Info */}
      <div className="space-y-4 p-4">
        <div className="flex items-start justify-between gap-4">
          <div>
            <h1 className="text-xl font-semibold">Classic Leather Watch</h1>
            <div className="mt-1 flex items-center gap-1">
              <Star className="fill-primary text-primary h-3.5 w-3.5" />
              <span className="text-sm font-medium">4.9</span>
              <span className="text-muted-foreground text-sm">(128)</span>
            </div>
          </div>
          <div className="text-right">
            <div className="font-semibold">$299.00</div>
            <div className="flex items-center gap-1 text-sm">
              <span className="text-muted-foreground line-through">$399</span>
              <span className="font-medium text-green-600">-25%</span>
            </div>
          </div>
        </div>

        <div className="space-y-3">
          <div>
            <label className="mb-1.5 block text-sm font-medium">Color</label>
            <div className="flex gap-2">
              <button className="h-8 w-8 rounded-full bg-black ring-2 ring-black ring-offset-2"></button>
              <button className="bg-brown-500 h-8 w-8 rounded-full"></button>
              <button className="h-8 w-8 rounded-full bg-slate-200"></button>
            </div>
          </div>

          <div>
            <label className="mb-1.5 block text-sm font-medium">Size</label>
            <div className="grid grid-cols-3 gap-2">
              <Button variant="outline" size="sm">
                38mm
              </Button>
              <Button variant="outline" size="sm">
                42mm
              </Button>
              <Button variant="outline" size="sm">
                44mm
              </Button>
            </div>
          </div>
        </div>

        <div className="space-y-2 pt-4">
          <Button className="w-full">Add to Cart</Button>
          <Button variant="outline" className="w-full">
            Buy Now
          </Button>
        </div>

        <div className="border-t pt-4">
          <div className="grid grid-cols-3 gap-2 text-center text-xs">
            <div>
              <span className="block font-medium">Free Shipping</span>
              <span className="text-muted-foreground block">
                2-3 business days
              </span>
            </div>
            <div>
              <span className="block font-medium">Free Returns</span>
              <span className="text-muted-foreground block">
                Within 30 days
              </span>
            </div>
            <div>
              <span className="block font-medium">Warranty</span>
              <span className="text-muted-foreground block">
                2 years coverage
              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

About this block

Compact Overview stacks a square image carousel above a tight product detail panel, all within a narrow centered column. The carousel shows one image at a time with left and right navigation buttons, dot indicators along the bottom edge, and a wishlist button in the top corner. Below the image, the panel opens with the product name and a star rating on the left and the current price alongside a struck-through original price and a discount badge on the right. Color swatches and a three-column size selector follow, then an "Add to Cart" button and a "Buy Now" button stacked full width. A three-column trust strip closes the panel with shipping, returns, and warranty notes.

Every text string, swatch, size label, and trust note is plain copy you can replace. The carousel accepts any number of images and the dot indicators update automatically. The trust strip, the discount badge, and either purchase button can be removed without affecting the rest of the layout.

When to use

Reach for this layout when the product page needs to load fast and feel native on a phone. The narrow single-column column keeps the entire purchase flow above or just below the fold on most mobile viewports, so a shopper can evaluate and buy without scrolling through a long details section. For an HR and hiring platform selling access plans or assessment packages, this layout surfaces the price, the tier options, and the buy button quickly so a recruiter on the go can upgrade without friction. The Classic Overview splits image and details side by side and works better when screen width is not a constraint.

A natural flow around it on an Ecommerce page:

Before

Category Filters to let the buyer narrow a catalog before landing on this page
Product List so shoppers arrive from a browsable grid

After

Customer Reviews to add social proof directly below the purchase panel
Cross Sells to recommend related items once the main product is presented

What you can customize

The block covers a focused set of purchase-decision elements that you can swap to match your catalog:

Product imagery. Replace the image URLs to show your own photos; add or remove array entries and the carousel and indicators adjust to the new count.
Variant selectors. Swap color swatches and size buttons for any option set your product uses, such as plan tier, license count, or contract length.
Trust strip labels. Rewrite the three footer cells with the guarantees that matter to your buyers, such as trial period, onboarding support, or data retention terms.

Tip: if your item has only one image, remove the navigation buttons and the indicator dots so the carousel area reads as a clean static photo.

About this block

When to use

A natural flow around it on an Ecommerce page:

Before

Category Filters to let the buyer narrow a catalog before landing on this page
Product List so shoppers arrive from a browsable grid

After

Customer Reviews to add social proof directly below the purchase panel
Cross Sells to recommend related items once the main product is presented

What you can customize

The block covers a focused set of purchase-decision elements that you can swap to match your catalog:

Product imagery. Replace the image URLs to show your own photos; add or remove array entries and the carousel and indicators adjust to the new count.
Variant selectors. Swap color swatches and size buttons for any option set your product uses, such as plan tier, license count, or contract length.
Trust strip labels. Rewrite the three footer cells with the guarantees that matter to your buyers, such as trial period, onboarding support, or data retention terms.

Tip: if your item has only one image, remove the navigation buttons and the indicator dots so the carousel area reads as a clean static photo.

Compact Overview

About this block

When to use

What you can customize

Search Shadcn UI Blocks

About this block

When to use

What you can customize