# Product Rail Gallery – Fashion Store Hero Section

> Product Rail Gallery, a fashion store hero section for React and Tailwind CSS (shadcn/ui): real garment photos hang from wooden hangers on a clothing rail (a clothing rack, in American English), turn to face the shopper on hover, slide along the rail with hanger physics, and lift off the rail to show the back. It is made for e-commerce: online clothing stores, fashion and apparel brands, streetwear drops and lookbooks that want a shop hero and product showcase shoppers can handle like a rack in a store. Each piece takes a front, back and side photo (transparent PNG or WebP) or falls back to built-in illustrations for tees, knits, hoodies, shirts, jackets and coats. The rail is a one-dimensional physics simulation: dragging a hanger pushes its neighbours, released pieces swing and settle, and the hovered piece turns with a perspective rotation. Keyboard users get a roving tabindex with arrow keys, Home/End and Enter; touch users tap to turn and tap again to lift; the detail view is an accessible modal with Escape, focus trapping and focus return. Autoplay, interval, hanger style, labels and an onOpenChange callback are props. Light and dark mode, prefers-reduced-motion, no dependencies beyond React.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: Hero, Hero Section, Ecommerce, Product Showcase
- Live preview: https://21st.dev/@dhxwhy/components/product-rail-gallery

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhxwhy/product-rail-gallery?api_key=$API_KEY_21ST"
```

Requires a 21st API key (generate one at https://21st.dev/mcp) passed as `API_KEY_21ST`. Free accounts get a limited number of installs per day; unlimited on a paid plan — see https://21st.dev/pricing.

Full component directory: https://21st.dev/llms.txt · More like this: https://21st.dev/community/components/s/hero.md