Media

Dark Pill Music Player

A premium pill-shaped music player featuring vertical scroll-snapping track selection, scroll-snapping volume, and a rolling album disc.

Loading player...

Installation

Option A: Via Sora UI CLI (Recommended)

If your project uses `shadcn/ui`, you can install this component and its dependencies automatically:

npx soraui-cli add dark-player

Option B: Manual Copy-Paste

1. Copy the code from the Code > Component tab above.

2. Paste it in your project at components/dark-player.tsx.

3. Install the dependencies:

npm install framer-motion lucide-react clsx tailwind-merge

API Reference

Detailed customization details for the Dark Pill Music Player. Adjust sizes, colors, playlists, volume, and playback speed via props.

Prop	Type	Default	Description
`spotifyToken`	`string`	`—`	Spotify Bearer token for dynamic metadata loading.
`trackIds`	`string[]`	`—`	Array of Spotify Track ID strings to load into the playlist.
`timelineColor`	`string`	`"#3f3f46"`	Active track highlight container border color (hex).
`componentColor`	`string`	`"#000000"`	Outer pill container background color (hex).
`defaultVolume`	`number`	`80`	Initial player volume on render (0 to 100).
`initialTrackIndex`	`number`	`2`	Initial track to load and center (0-indexed).
`playbackSpeed`	`number`	`1.0`	Playback speed multiplier (0.5, 1.0, 1.5, 2.0).
`loop`	`boolean`	`true`	Loops playlist playback continuously.
`titleOverride`	`string`	`—`	Override text for the active track name.
`artistOverride`	`string`	`—`	Override text for the active track artist.

Examples

Basic Setup

Default player with built-in copyright-free tracks and volume control.

App.tsx

import { MusicPlayer } from "@/components/ui/dark-player";

export default function Demo() {
  return <MusicPlayer />;
}

Spotify Powered

Loads custom track titles, cover images, and preview streams dynamically from Spotify.

App.tsx

import { MusicPlayer } from "@/components/ui/dark-player";

const SPOTIFY_TOKEN = "your_spotify_token_here";
const TRACK_IDS = ["0V3wPSX3ygHQwZ21K47gOO", "7qiZRhU7tZ2XG6xBvDUz6r"];

export default function App() {
  return (
    <MusicPlayer
      spotifyToken={SPOTIFY_TOKEN}
      trackIds={TRACK_IDS}
      initialTrackIndex={0}
    />
  );
}