Shop the Look

Overview

About the Shop the Look

A shoppable outfit carousel: scroll to bring the next look to center, tap pins on the garments, and add single pieces or the full bundle from a synced sidebar. It is delivered as editable TypeScript for React. Self-contained, instance-scoped CSS. Tailwind CSS is not required. No animation package required. Its focused API can be adapted to your own content and visual system.

Usage

When to use it

• Fashion storefronts presenting complete outfits with a bundle discount.
• Seasonal lookbooks and campaign pages that link each garment to its product.

What’s included

Files in the product ZIP

Usage

Import and render

Copy the packaged source to the documented path, then use the public API shown below.

import { ShopTheLook, type Look } from "@/components/shop-the-look";

const looks: readonly Look[] = [
  {
    id: "studio-day", title: "Studio Day", image: "/looks/studio-day.png", imageAlt: "Model in a grey sweater and wide jeans",
    pieces: [
      { id: "crew", brand: "Your Brand", name: "Ash Crew Knit", price: 128, image: "/products/crew.jpg", pin: { x: 52, y: 34 } },
      { id: "denim", brand: "Your Brand", name: "Loose Denim", price: 112, image: "/products/denim.jpg", pin: { x: 40, y: 64 } },
    ],
  },
];

export default function Lookbook() {
  return <ShopTheLook looks={looks} bundleDiscount={10} onAddLook={(look, { bundleTotal }) => console.log(look.id, bundleTotal)} />;
}

Props

Component API

Navigate by scrolling over the stage, dragging horizontally, the arrow keys while the stage is focused, the arrow buttons, the progress steps, or by clicking a side figure. Pins appear only on the centered look; tapping one highlights its piece in the sidebar, and hovering a piece highlights its pin. Below 760px container width the sidebar moves under the stage. Reduced motion removes slide transitions. Cart state, checkout and inventory belong to your app; the component only reports add events.

Compatibility

Verified project setup

• ReactLoom's preview is tested with Next.js 16.3.8 App Router, React 19.2.8, TypeScript 5.9.3, and Tailwind CSS 4.3.3. This describes the store environment, not the product's minimum requirements.
• This interactive component includes the "use client" directive and must remain behind a Client Component boundary in the Next.js App Router.
• Self-contained, instance-scoped CSS. Tailwind CSS is not required. No animation package required.

Images

Provide your own licensed look images (full-body cut-outs on a transparent or matching background work best) and product thumbnails. The store demo uses Unsplash photos (background removed) that are not distributed in the ZIP.

Fonts

No font files are included. The component uses system font fallbacks unless your app supplies a matching font.

Installation

Add it to your project

Download the Shop the Look ZIP, place the source file at src/components/shop-the-look.tsx, and copy the example into your own page or feature folder.

No additional npm runtime packages are required beyond the React host; follow the styling requirements below.