Docs / Components / Music Player Card
Music Player Card
A beautifully styled, fully functional glassmorphic music player card.
Diljit Dosanjh@diljitdosanjh
GOAT
0:33-1:40
Dependencies
Install the following dependencies to use this component:
1npm install motion lucide-react
Installation
Run the following command in your terminal to add the component to your project:
1npx rankflow-ui@latest add music-player-card
Props Reference
| Prop | Type | Default | Description |
|---|---|---|---|
| artistName | string | 'Diljit Dosanjh' | The name of the featured artist. |
| artistHandle | string | '@diljitdosanjh' | The social handle of the artist. |
| artistAvatar | string | Unsplash URL | URL pointing to the artist's avatar image. |
| coverArt | string | Unsplash URL | URL pointing to the background track cover art. |
| songName | string | 'GOAT' | The name of the current track/song. |
| duration | number | 133 | Total duration of the track in seconds. |
| className | string | '' | Additional Tailwind CSS classes. |