# Vinyl Record Crate Gallery – Music Store Hero Section

> Vinyl Record Crate Gallery – Music Store Hero Section for React and Tailwind CSS (shadcn/ui): a wooden crate of album sleeves that visitors flip through like crate digging in a record store. It is built to make a music shop or artist page feel tactile, so browsing albums feels hands-on, not like a grid. Use it for record store hero sections, album galleries and new releases. Drag, flick, scroll or press the arrow keys to tip sleeves onto a leaning pile; each sleeve rides a spring and a flick riffles several in a row. Hover lifts the front sleeve and slides the vinyl out; click pulls the record onto a turntable to spin at 33⅓ rpm beside its track list. Items take cover, title, artist, year, genre, label colour, price and tracks; the index is controlled or uncontrolled, with onIndexChange, onOpenChange, onPlay and labels. Roving tabindex, a focus-trapped dialog, instant flips under reduced motion and light/dark shadcn tokens. The included demo digs through eight fictional albums and makes no requests beyond image loads. Requires React and lucide-react, with no animation library.

- Author: [DHxWhy](https://21st.dev/@dhxwhy)
- License: mit
- Tags: Hero, Hero Section, Gallery, Music, Carousel
- npm dependencies: lucide-react
- Live preview: https://21st.dev/@dhxwhy/components/record-crate-gallery

## Install

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