Componentticket-stub0.43 KB gzipZero dependencies

VinylRecord

Spinning vinyl with radial grooves, center label, a tonearm that slides in and a wobble on drop.

Preview

Live Preview

Side A

Installation

Tokens guide →

Add to your project via CLI (zero dependencies, code you own):

npx bigbullui add vinyl-record

Or install the full npm package:

npm install bigbullui

Usage

Open in StackBlitz

import { VinylRecord } from "@/components/ui/vinyl-record";

<VinylRecord label="SIDE A" playing={playing} onToggle={() => setPlaying(p => !p)} />

Usage guidance

Use VinylRecord when a ticket stub surface needs Spinning vinyl with radial grooves, center label, a tonearm that slides in and a wobble on drop. Keep props minimal and prefer composition with sibling stubs.

Avoid VinylRecord for long form flows or dense data grids where a dedicated layout block fits better.

Source code

vinyl-record.tsx

Zero dependencies (only React + utils). Copy and paste directly into your project:

"use client";

import * as React from "react";
import { cn } from "./lib/utils";

export interface VinylRecordProps {
  label?: React.ReactNode;
  playing?: boolean;
  onToggle?: () => void;
}

export function VinylRecord({ label, playing = false, onToggle }: VinylRecordProps) {
  return (
    <div
      className={cn(
        "relative size-32 rounded-full border border-border bg-card p-4 motion-reduce:transition-none",
        "group"
      )}
    >
      <div className="absolute inset-0 rounded-full bg-gradient-to-b from-border/20 via-border/30 to-border/20" />

      <div className="absolute inset-0 flex items-center justify-center">
        {label || <div className="size-8 rounded-md border border-border/50 bg-border/50" />}
      </div>

      <div className="absolute -right-2 top-1/2 -translate-y-1/2 size-6 border-2 border-border/50" />
    </div>
  );
}

Props

Prop	Type	Description
label?	React.ReactNode
playing?	boolean
onToggle?	() => void