# Pendant Lamp Rail Gallery – Lighting Store Hero Section

> Pendant Lamp Rail Gallery for React and Tailwind CSS (shadcn/ui): pendant lamps on a brushed aluminum ceiling track that switch on as you brush past them. It is built to make a lighting store feel like a real showroom, so visitors switch a lamp on, see its glow on the wall and stay to compare. Use it for lighting stores, home decor and interior e-commerce, product showcases and hero sections. Each lamp crossfades to its switched-on photo with a warm pool, beam and bloom on the wall; the cords swing with pendulum physics, longer cords slower. Drag a pendant along the track to push its neighbors; click or press Enter to lift it into a detail view whose dimmer sets the glow. Items take name, description, image, imageOn, drop, glow, tag and details; control the lit lamp with active and onActiveChange, listen with onOpenChange and translate labels. Keyboard roving focus, an accessible modal, touch swipe, reduced motion and light and dark themes are built in. The included demo hangs eight pendants and makes no requests beyond image loads. Requires React only, with no animation library.

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

## Install

```bash
npx shadcn@latest add "https://21st.dev/r/dhxwhy/pendant-lamp-rail?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