Skip to content

Component 054Commerce

Clothing Color Customizer

A clothing color studio with smooth front and back views, garment zoom, instant masked recoloring, and preserved fabric detail.

  • React
  • Tailwind CSS
  • TypeScript
Click the garment to switch smoothly between front and back photographs, then use the zoom controls to inspect the fabric.
Loading preview…
Live interactive preview

Quick start

Make it yours.

Save clothing-color-customizer.tsx in your components folder, then import it below. Requires React and Tailwind CSS.

TSXapp/page.tsx
import ClothingColorCustomizer from "@/components/ui/clothing-color-customizer";

export default function ProductPage() {
  return (
    <ClothingColorCustomizer
      productTitle="Everyday cotton tee"
      productImage="/products/tee-front.png"
      garmentMask="/products/tee-front-mask.png"
      backImage="/products/tee-back.png"
      backGarmentMask="/products/tee-back-mask.png"
      initialColor="#D4D2CC"
    />
  );
}

// Each image and its mask must have identical dimensions.
// White = recolor; black or transparent = preserve.
// Omit props to try the bundled photographic demo.

Behind the interaction

The details that make it work.

Designed to explore, ready to adapt.

Your own color studio

Animated front and back views, garment zoom, preset swatches, a native picker, validated HEX input, style selection, and original-image reset.

Keep the fabric details

Cached linear-light shading preserves folds and texture. White mask regions recolor while black or transparent regions protect backgrounds, labels, prints, and hardware.

Local and reusable

A typed component and exported canvas hook process every color in your browser. Neutral product images give the best results; colored lights and complex materials cannot be reconstructed from one photo.

Keep exploring

More from the lab.

View all components
Commerce / 050

Swift Sneaker Store

Four sneaker panels expand into a warm, minimal storefront with product details, color choices, sizes, and a working shopping bag.

Commerce / 032

Aura Cart Animation

A warm cream storefront turns a product mosaic into a focused shopping view, with color changes and a playful image flight into the bag.