Clothing Rack

Galleries

About

A clothing rack showcase: garments hang side-on on a steel rail, turn to face you on hover, and open into a focus view with front/back, colourway swing tags and a dye-style colour change.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Clothing Rack to your project and fits it to your theme.

Code

How Clothing Rack is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import ClothingRack, { type Garment } from "@/components/ui/clothing-rack"

// Generated yoga wear: transparent cut-outs on one 1200x2200 canvas, one physical scale, hook at (600, 86).
const IMAGES: Record<string, string> = {
  "bra-side": "3096692b-2bac-4859-b0f4-08f9aaeddfde.webp",
  "bra-back": "30a7ab40-6185-4738-aaae-e0b12661caa2.webp",
  "bra-lilac-front": "42727688-ab4c-4743-93ba-d13cae859622.webp",
  "bra-lilac-side": "6cb7bdfd-b873-4e1d-9d58-835785ab6c93.webp",
  "bra-lilac-back": "f307f57c-e26f-4029-967d-15765f534651.webp",
  "bra-black-front": "bcdd42ce-b058-412b-a3b1-e9b1139b0354.webp",
  "bra-black-side": "b710b9a4-51cf-4ef5-9b01-5be1b774f712.webp",
  "bra-black-back": "60019d17-a928-4418-ab13-6abfc8ea3b0e.webp",
  "tank-front": "a606341c-0810-45b2-b303-d04c7f0c30b5.webp",
  "tank-side": "1e950524-eafe-40f3-975b-52bcaa8ab3ed.webp",
  "tank-back": "5ff299d9-005a-4ae6-914b-03db0471b340.webp",
  "longsleeve-front": "e37896eb-7fc1-4692-ba13-36762a0e6aeb.webp",
  "longsleeve-side": "389de3c7-c976-475c-b390-7ba942aa783a.webp",
  "longsleeve-back": "5f491c44-994c-41bb-bb54-13061187366e.webp",
  "jacket-front": "f910ccdf-a064-4d85-9556-beac7ffc76b5.webp",
  "bra-front": "2e72042b-5159-4d69-a289-8279c0a5e508.webp",
  "jacket-side": "b5feac38-d29b-4859-98d1-49ab40fae05f.webp",
  "jacket-back": "851ca162-65c9-430a-a348-793f8419c9c2.webp",
  "leggings-front": "c55604ac-d623-44eb-978d-4ff8027e8115.webp",
  "leggings-side": "4f46636e-3165-4eaa-9eb8-016e5fb38d87.webp",
  "leggings-back": "e9489086-b105-412c-878b-00f05a30639f.webp",
  "leggings-espresso-front": "f53f5cb9-e261-4fb3-9393-34dad2044b50.webp",
  "leggings-espresso-side": "475d4590-771e-4b92-a9d1-1d566fa18ac7.webp",
  "leggings-espresso-back": "e32cd452-9b9a-4bf9-8b40-c31d9cf88da7.webp",
  "flares-front": "ee03a1ca-3f6c-4888-a941-473e16f06e28.webp",
  "flares-side": "7fd6ec04-691d-4580-a652-7462a5d45e2b.webp",
  "flares-back": "9426ab62-ef00-4d1e-b0d6-5cc2ae73693e.webp",
  "flares-black-front": "14b21144-9382-4867-831b-8074fe9a5d52.webp",
  "flares-black-side": "da5913c2-edde-4e8d-81c0-791640f8bc13.webp",
  "flares-black-back": "5c401a19-2d98-4998-aee9-71d3429f505b.webp"
}
const img = (name: string) => "https://d2ol7oe51mr4n9.cloudfront.net/user_3Aqu5Tl1ug3LsKxYpX3r9Rv9n6L/" + IMAGES[name]

const garments: Garment[] = [
  {
    name: "Ribbed Longline Bra",
    side: img("bra-side"), front: img("bra-front"), back: img("bra-back"),
    colourways: [
      { label: "Sage", hex: "#6f7a70" },
      { label: "Lilac", hex: "#9c8c9e", side: img("bra-lilac-side"), front: img("bra-lilac-front"), back: img("bra-lilac-back") },
      { label: "Black", hex: "#1b1b1b", side: img("bra-black-side"), front: img("bra-black-front"), back: img("bra-black-back") },
    ],
    shoulder: 328,
    hem: 1089,
    halfWidth: 386,
  },
  {
    name: "Racerback Crop Tank",
    side: img("tank-side"), front: img("tank-front"), back: img("tank-back"),
    colour: "Rose",
    shoulder: 318,
    hem: 1131,
    halfWidth: 387,
  },
  {
    name: "Ribbed Long Sleeve",
    side: img("longsleeve-side"), front: img("longsleeve-front"), back: img("longsleeve-back"),
    colour: "Oatmeal",
    shoulder: 300,
    hem: 1485,
    halfWidth: 432,
  },
  {
    name: "Full-Zip Jacket",
    side: img("jacket-side"), front: img("jacket-front"), back: img("jacket-back"),
    colour: "Navy",
    shoulder: 379,
    hem: 1664,
    halfWidth: 591,
  },
  {
    name: "High-Rise 7/8 Legging",
    side: img("leggings-side"), front: img("leggings-front"), back: img("leggings-back"),
    colourways: [
      { label: "Black", hex: "#222122" },
      { label: "Espresso", hex: "#38251e", side: img("leggings-espresso-side"), front: img("leggings-espresso-front"), back: img("leggings-espresso-back") },
    ],
    shoulder: 200,
    hem: 1916,
    halfWidth: 327,
  },
  {
    name: "Ribbed Flare Pant",
    side: img("flares-side"), front: img("flares-front"), back: img("flares-back"),
    colourways: [
      { label: "Clay", hex: "#a7533e" },
      { label: "Black", hex: "#202020", side: img("flares-black-side"), front: img("flares-black-front"), back: img("flares-black-back") },
    ],
    shoulder: 197,
    hem: 2136,
    halfWidth: 433,
  },
]

const settings = {
  brand: "yoga",
  marquee: "NEW DROP  •  SIX PIECES  •  RIBBED, BRUSHED, SOFT  •  ",
  ctaLabel: "See availability",
  railY: 0.18,
  pitch: 0.36,
}

export default function ClothingRackDemo(props: Partial<typeof settings>) {
  const s = { ...settings, ...props }
  return (
    <ClothingRack
      garments={garments}
      imageSize={[1200, 2200]}
      hook={[600, 86]}
      brand={s.brand}
      marquee={s.marquee}
      cta={{ label: s.ctaLabel, href: "#" }}
      railY={s.railY}
      pitch={s.pitch}
    />
  )
}