Product Card

Expandable card component for displaying music product information with versions.

Installation

Install this component via the shadcn CLI.

npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/product-card.json

Or install the theme first: npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sthlm-theme.json

Preview

Interactive component demo.

NO	TITLE	ARTIST	RELEASE DATE	MUSICAL DETAILS	VERSIONS	EARNINGS
01	Oceans	Barfalk Featuring Honey Belle Pears	-	7	4	$15,5562.04% ^

Usage

How to use this component in your code.

<ProductCard
  number="01"
  title="Oceans"
  artist="Barfalk Featuring Honey Belle Pears"
  musicalDetails={7}
  versions={4}
  earnings={15556}
  earningsChange={2.04}
  productVersions={versions}
/>