Clothes Rack

A shop rail of 3D garments that swivel to face you, with cloth that moves like fabric. Built with three. Optional fabric scans improve the knit and studio light.

Default

Point at a garment to face it; click for the detail view. Parent must have a size — the rack fills it.

Loading…

Installation

source.tsx

npx @sonojs/ui@latest add …
import { Component } from "@/components/…"
export function Example() {
  return <Component />}

Usage

page.tsx

"use client"

import { ClothesRack } from "@/components/clothes-rack"

export default function Page() {
  return (
    <div className="h-[560px] w-full">
      <ClothesRack gap={6} />
    </div>
  )
}

Props

Prop	Type	Default	Description
items	ClothesRackItem[]	defaultItems	Garments on the rail, in order.
gap	number	7	Clear air between side-on garments, as % of body width.
restAngle	number	80	Turn-away angle at rest, in degrees.
duration	number	0.25	Seconds to turn and face you.
flow	number	1	How loose the cloth is (0 stiff … 2 very loose).
breeze	number	0	Idle draught along the rail (0–1).
rail	"chrome" · "black" · "brass"	"chrome"	Rail finish.
hanger	"wood" · "black" · "chrome"	"wood"	Hanger finish.
detail	boolean	true	Open the detail view on click / Enter.
textures	GarmentTextures	—	Optional jersey/fleece maps, heather grain, and studio HDR URLs.
className	string	—	Classes on the outer box (give it a size).