An endless 3D clothing rail for fashion stores in React: garments hang in true perspective, the piece in front faces you, and sizes, add to bag, a detail view and an accessory tray sit beside it. CSS 3D, no 3D library, light and dark.
by UpFork, built by Ramin ValadanComponentUpdated 14 Nov 2026
18 files · 224 assets
From the workbench
By the developer who built it: how it works, with its real code and live preview in the text, and the lessons learned along the way.
Behind the build
The Python pipeline behind Hangline's AI-generated garment pictures: a signed LAB key, clean edges, hook points found by shape, colourways, shadow masks and an edge audit. 21 lessons.
Ramin ValadanProved GitHub account and website, confirmed e-mail: checked by UpFork28 min readAI
21 lessons
Behind the build
How Hangline hangs garments on a steel rail in CSS 3D alone: one camera in numbers, one number per piece, wall shadows, hanger springs and an endless rail, with 19 lessons.
Ramin ValadanProved GitHub account and website, confirmed e-mail: checked by UpFork29 min readAI
19 lessons
A clothing rail for fashion stores, as a React component in CSS 3D. Garments hang on one steel rail in true perspective. The piece in front faces you on a face-out arm, and the rest wait along the rail, edge on, with their own shadows on the wall. Step, drag or flick, and the rail travels: pieces swing a little on their hangers and settle. Choose a colour and a size, and add to the bag, beside the rail or in the piece's own view. An oak tray of accessories sits on the same wall: the room pans across to it.
It is for a small edit, 8 to 20 pieces. It is not a catalogue grid.
Copy registry/hangline/ (15 files) into your project and put your pictures under public/. The component imports its own stylesheet, so your bundler must take CSS imports (Next.js and Vite do). React 19 is the only dependency. There is no CSS framework and no 3D library: the room is DOM and CSS transforms, and the pictures are plain <img> elements.
import Hangline from "./hangline/hangline";
<Hangline
garments={garments}
accessories={accessories}
wall={{ src: "/hangline/room/wall-relief.webp" }}
tray={{ src: "/hangline/room/tray.webp" }}
syncUrl
onAddToBag={addToCart}
onCheckout={goToCheckout}
/>;
It has been run in a Next.js 16 app (server-rendered, StrictMode) and in a plain Vite app (StrictMode). Give it a box with a height: the whole window, or a section. On a phone it lays itself out as a page, so let it grow there (height: auto on its parents under 700 px, as the demo's registry/ellund/ellund.css does).
The demo store is in registry/demos/ (default is the full store, then a section in a page and a small rail of eight) and registry/ellund/ (its data, page styles and fonts). Read it as an example; it is not part of the component.
Fonts: the component loads none. It reads --hl-display (piece names, default Instrument Serif, then Georgia) and --hl-text (everything else, default the system font). Set them on :root. The demo loads Instrument Serif and Hanken Grotesk.
Names: every class and custom property starts with hl- or --hl-.
This is the part that matters. The rail needs a straight-on photograph of each garment on a hanger, cut out, with its hook point, because the component draws one hook for every hanger and hangs the picture from it.
hook: where the hanger's neck meets the drawn hook, 0 to 1 of the picture.size: the piece's height on the rail against a typical jacket (1 is about 70% of the scene's height).shadow.near and shadow.far: the picture's alpha, blurred, for the wall shadows.outline: the garment's silhouette as the points of a CSS polygon(). Only that shape answers the pointer, so a piece waiting beside the front one can be pointed at. It is optional: without it the whole picture answers.scripts/photos/ is the pipeline that made the demo's set: cut-out (shadows and shaded gaps kept out, each edge cleaned against the backdrop actually beside it), hook point, colourways registered onto one another so a colour change is a clean crossfade, backs colour-matched to their fronts, sizes in WebP and AVIF, the shadow masks and the outline. audit_edges.py scores every cut-out's edge and writes 300% crops of it on each ground it meets. It needs Python 3 with Pillow, NumPy, OpenCV and SciPy. Read it and adapt it to your own pictures: it is a working tool, not a product. PHOTOS.md shows how to run it.
fromShopifyProducts(products, { photo, swatch, gallery }) maps Shopify products to Garment objects. It is a plain mapper and makes no network calls. Be realistic about it: a shop's own product photos are usually not straight-on hanger cut-outs, and on those the rail will not look right until the pictures are redone. You pass it a photo function that returns the prepared hanger picture for a product in a colour.
The code is MIT. The pictures are not. They keep their own licences or terms, and each one has a row in PHOTOS.md.
PHOTOS.md lists each file's marks). We have not verified those tools' terms for this use: check them yourself, or replace the pictures. Nothing in this product says they are real photographs.Replace the pictures with your own before you sell anything. Ellund, its piece names and its prices are invented, and nothing in the demo is for sale.
| Prop | What it does |
|---|---|
garments | The rail. Each has id, slug, href, name, price, currency and colourways (each with a name, a swatch, the hanger photo, its gallery and its sizes with stock); optional compareAtPrice, description, material, care, sizeChart, wearWith |
accessories | The tray. Each has a photo from above, a place on the tray (x, y, rotation), a gallery, and optional variants. Left out, there is no tray |
wall, tray | The wall's relief and the tray's surface: { src } |
theme | "auto" (default: your dark class, then the system), "light" or "dark" |
accent | Focus rings, the chosen piece on the tray and the added state's check. Default the stylesheet's own (--hl-accent) |
wheel | "page" (default): a vertical wheel over the rail scrolls the page. "rail": it moves the rail |
loop | true (default): an endless rail. Next after the last piece is the first, a piece that leaves at the front rejoins the rail behind the last one, and the queue is always full. false: the rail stops at its first and last pieces. Needs three pieces or more |
openSlug, defaultOpenSlug, onOpenChange | Which piece is open, controlled or not |
syncUrl | Keeps the open piece in the address (true for ?piece=, or { param }), with back and deep links |
category, onCategoryChange | Clothing or accessories, controlled or not |
storeName, heading, eyebrow | The top bar's name, and the words beside the rail |
detailTop | Your site's header height, so an open piece is brought fully into view below it |
bag, onBagChange | Control the bag from outside. Left out, it keeps its own |
onAddToBag | May return a promise. A rejected one shows that it failed and keeps the choice |
onCheckout | The bag's checkout button |
saved, onSavedChange | The heart on each piece |
labels, formatPrice, dir | Every word, every price, and right to left |
barExtra | Your own control in the top bar (the demo's pull-cord for the light) |
Also exported: SizeTiles, SizeGuide, AddToBagPill, BagDrawer, fromShopifyProducts.
dir="rtl" and your labels; the room mirrors.On a production build in Chrome, on a notebook with Intel Iris Plus graphics, with all 14 pieces' own pictures, while other work ran on the same machine:
Not met: with the phone's CPU slowed four times, LCP is 3.0 to 3.6 s. One choice of an accessory in three passes had one long frame. The room is laid out in the browser, after hydration.
Every interaction in both themes, 14 window sizes from 320 to 3440 px, touch, right to left, reduced motion, the keyboard and axe; frame-by-frame filmstrips of the rail, the endless rail across its seam included; no text moving by layout during a move; contrast on the real pixels behind each text; server rendering in StrictMode with deep links; the page without JavaScript; and a plain Vite app. The checks themselves (Playwright scripts) are not part of this package.
MIT for the code, © UpFork (upfork.dev). The pictures are not covered: see PHOTOS.md and LICENSE.
0 reviews · 0 bugs
Ship it0With fixes0Skip0· 0 reviews
0 bugs0 open0 fixed
Members who have it review it and report its bugs. Sign in
No reviews or bugs yet.
Without the CLI
Copy the files into your project
The paths follow the shadcn/ui layout, with @/ as your project’s import alias.
Its pictures load from UpFork
The code above points at UpFork’s copies (18 MB), so there’s nothing to copy. To host them yourself, use Download source: its ZIP has the files where the code expects them, and a README on the switch.
Before you buy
How this component gets from the preview into your project, and what buyers ask most.
How to use it
From the preview to your project
Try it in the preview
Switch between light and dark, and resize it to phone and tablet widths, before you decide.
Get it
Free products are yours with a free account. Paid ones settle in USDT on TRON, sent straight to the wallet on your order.
Install it
Components go into your project with one shadcn command, dependencies included. Everything else downloads with a checksum.
Make it yours
It's your code now: rename it, restyle it and wire in your real data.
Or hand it to your AI
Copy the prompt and let your coding assistant place it in your project, following your conventions.
Yes, a free one: it keeps your order, every payment you make for it and the files together. Free products need it too: without an account you can look and try the live preview, but not download, install or copy anything.
Send the price as a USDT transfer on TRON (TRC-20) to the wallet on your order, shown with its QR code, then paste the transaction ID on the order. It's checked on-chain, and the files unlock once it's confirmed. Paid less? You're asked for the rest.
Yes. MIT and the Standard License both cover unlimited personal and commercial projects, client work included; the Standard License only asks that you don't resell it on its own. The product's page names its license.
Create a CLI token on your account page, put it in your project's .env.local, add UpFork to components.json once, and install with npx shadcn add: free and paid components alike.
Onto your order, in your account. Download links last ten minutes and can be made again.
Releases are scanned for malware and reviewed before anyone can download them, and every file shows its SHA-256 so you can check what you got.
Building with an AI assistant?
Copy a ready-made prompt with the code, its dependencies and a demo, and your assistant can put it in place for you.
Selling your own work?
Get approved once, then publish components, templates and mobile components, paid in USDT straight to your own wallet.
Components
