Vinyl Record Crate Gallery – Music Store Hero Section

Heroes

About

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.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Vinyl Record Crate Gallery – Music Store Hero Section to your project and fits it to your theme.

Code

How Vinyl Record Crate Gallery – Music Store Hero Section is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import * as React from "react";
import RecordCrateGallery from "@/components/ui/record-crate-gallery";
import type { CrateRecord } from "@/components/ui/record-crate-gallery";

export const CRATE_DEMO_RECORDS: CrateRecord[] = [
  {
    id: "desert-sun",
    title: "Red Dune Summer",
    artist: "The Mesa Choir",
    year: "1978",
    genre: "Psych rock",
    label: "#D2462E",
    price: "$38",
    image: "https://cdn.21st.dev/assets/mirror/3b/3b6602ca45256152279275a4c03231bb7e31248f86d8a973dc57f94371d09a91.webp",
    tracks: ["Heat Mirage", "Long Shadow Road", "Ochre", "Sundown Hymn"],
  },
  {
    id: "neon-grid",
    title: "Grid Horizon",
    artist: "Satellite Avenue",
    year: "1987",
    genre: "Synth-pop",
    label: "#C04BD8",
    price: "$34",
    image: "https://cdn.21st.dev/assets/mirror/aa/aa38b495efef4d62bb175d59f121166d72491a872dbf542f0d5c100538c11f59.webp",
    tracks: ["Vector Sunset", "Arcade Heart", "Chrome Coast", "Night Drive Signal", "Horizon Line"],
  },
  {
    id: "ocean-film",
    title: "Salt Film",
    artist: "Lagoon Archive",
    year: "2008",
    genre: "Dream pop",
    label: "#3F9A9C",
    price: "$31",
    image: "https://cdn.21st.dev/assets/mirror/89/89f4e34dc32cbbd63afbce9d2d5bfcd5a23df963e262caff7c89d4f0fcf97f70.webp",
    tracks: ["Tidal Grain", "Faded Postcard", "Low Tide Lights", "Seafoam", "Horizon Hum"],
  },
  {
    id: "midnight-city",
    title: "Amber After Dark",
    artist: "Vela Ortiz",
    year: "2019",
    genre: "Downtempo",
    label: "#E8A23A",
    price: "$32",
    image: "https://cdn.21st.dev/assets/mirror/4e/4e9b87c7c3fd8e929f2c04f99937b93af73b3db4a3589180b66e92b15f7dfca0.webp",
    tracks: ["Sodium Glow", "Last Tram Home", "Rooftop Static", "Neon Rain", "Four A.M. Avenue"],
  },
  {
    id: "botanical",
    title: "Fern & Fig",
    artist: "Juniper Hale",
    year: "2021",
    genre: "Folk",
    label: "#5E8C4A",
    price: "$26",
    image: "https://cdn.21st.dev/assets/mirror/83/837cc9f6e3b9c0c6684fd84ae85abd1a4f830edc3b6339a4b10516600f68800f.webp",
    tracks: ["Greenhouse", "Morning Frond", "Pressed Leaves", "Fig Tree Waltz"],
  },
  {
    id: "brass-section",
    title: "Bell & Breath",
    artist: "The Copperline Horns",
    year: "1979",
    genre: "Soul",
    label: "#D9A441",
    price: "$42",
    image: "https://cdn.21st.dev/assets/mirror/30/3048eacfdc1fd671161d76ac51d79373a22f15ae37621b966e6f35c21fbf929a.webp",
    tracks: ["Opening Fanfare", "Golden Hour", "Valve Oil Blues", "Second Line", "Encore"],
  },
  {
    id: "coffee-stain",
    title: "Second Cup",
    artist: "Mara Okafor Trio",
    year: "2016",
    genre: "Jazz",
    label: "#8A5A3C",
    price: "$27",
    image: "https://cdn.21st.dev/assets/mirror/e3/e32dccd81ef88f9ae49ff02d04e7ef72fd57dd8579b0356958a48d3a0405ff9f.webp",
    tracks: ["Espresso Ballad", "Saucer Swing", "Ring on the Table", "Refill"],
  },
  {
    id: "analog-synth",
    title: "Patch Bay Hymns",
    artist: "Ivo Lindqvist",
    year: "1984",
    genre: "Electronic",
    label: "#E9E5DC",
    price: "$29",
    image: "https://cdn.21st.dev/assets/mirror/d9/d9c028545ebc691d9c4a0eb22056eff3fcd53f552b37a6a1e3140f6a13d06349.webp",
    tracks: ["Oscillator I", "Gate & Envelope", "Cable Garden", "Low Pass Lullaby", "Oscillator II"],
  },
];

export default function RecordCrateGalleryDemo({ autoplay = true }: { autoplay?: boolean }) {
  const [index, setIndex] = React.useState(0);
  const [digging, setDigging] = React.useState(autoplay);
  const count = CRATE_DEMO_RECORDS.length;
  return (
    <div data-crate-demo className="flex min-h-svh w-full items-center justify-center bg-background text-foreground">
      <RecordCrateGallery
        items={CRATE_DEMO_RECORDS}
        index={index}
        onIndexChange={setIndex}
        autoplay={digging}
        interval={1700}
        eyebrow="Record shop · Fresh arrivals"
        heading="A record crate you can dig through, right on the page."
        caption="Flick through the sleeves, hover to peek at the vinyl, pull one out to spin it."
        action={
          <button
            type="button"
            data-crate-action
            onClick={() => { setDigging(false); setIndex((i) => (i + 3 > count - 1 ? 0 : i + 3)); }}
            className="rounded-full bg-foreground px-5 py-2.5 text-sm font-medium text-background shadow-sm outline-none transition-[transform,box-shadow] hover:-translate-y-px hover:shadow-md focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background motion-reduce:transition-none"
          >
            Browse the crate
          </button>
        }
      />
    </div>
  );
}