# Skateboard Deck Rail Gallery – Skate Shop Hero Section

> Skateboard Deck Rail Gallery – Skate Shop Hero Section for React and Tailwind CSS (shadcn/ui): a skateboard deck wall where decks hang from hooks on a powder-coated rail. It is built to make a product grid feel like a skate shop wall visitors want to touch. Use it for a skate shop or streetwear store hero section or a product showcase. Hover turns a leaning deck to face you and nudges its neighbours; drag one and it slides along the rail, knocks the next deck and springs back with hanger physics. Click, Enter or a second tap lifts it into a detail view that can flip to grip beside the specs. Items take image, name, series, width, price and details; active plus onActiveChange make it controlled, onOpenChange reports the detail view and labels rename the buttons. Decks are buttons with one Tab stop, the dialog traps focus and closes on Escape, reduced motion turns every swing off, and it suits light and dark mode. The included demo hangs eight original deck graphics, autoplays one at a time 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/skate-deck-rail

## Install

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