Mini Player
A now-playing card with generated cover art, a morphing play/pause, skip and a scrubber.
mini-player.tsxmini-player.css
Checking access…
Overview
The cover lifts and an equaliser starts when playing; play morphs into pause by animating the path itself.
It keeps its own clock for demos; in production feed it from an <audio> element.
When to use
- Podcast, music and voice-note players.
When not to use
- Video: use a video player with captions.
Installation
$
pnpm dlx shadcn@latest add https://sundaeui.dev/r/mini-player.json$
npx shadcn@latest add https://sundaeui.dev/r/mini-player.json$
yarn dlx shadcn@latest add https://sundaeui.dev/r/mini-player.json$
bunx --bun shadcn@latest add https://sundaeui.dev/r/mini-player.jsonWorks in any React project. Files are written to components/sundae/. Read the source in the stage’s Code view. Pro assets need a personal token. See authenticated installs.
- No dependencies beyond React 18 or later.
- Copy mini-player.tsx and mini-player.css into components/sundae/.
- The CSS file is imported by the component, so no extra configuration is needed.
- Import the component and use it as shown below.
Usage
import { MiniPlayer } from '@/components/sundae/mini-player'
<MiniPlayer tracks={[{ title: 'Afterglow Avenue', artist: 'Halcyon Drive', duration: 214, colors: ['#2f5fd0', '#e8e4da', '#2f5fd0'] }]} />Props
| Prop | Type | Default |
|---|---|---|
tracks*Title, artist, duration and cover colours. | Track[] | — |
autoPlayStart playing. | boolean | false |
layoutHorizontal or stacked. | 'row' | 'stack' | 'row' |
fillSurface: dark or light. | 'dark' | 'light' | 'dark' |
Accessibility
- Seek is a native range input with aria-valuetext ("0:38 of 3:34").
- Play, previous and next are labelled buttons.
- Reduced motion stops the equaliser and path morph.
Customization
- Every colour is a CSS custom property on the root class; override them in your own stylesheet.
- fill="light" switches the built-in light palette.
Keyboard
- Tab
- Move between controls
- ← / →
- Seek (on the scrubber)
FAQ
- Is Mini Player free?
- Mini Player is part of Sundae Pro. The live preview is open to everyone; the source installs with a Pro account.
- How do I install Mini Player?
- Run npx shadcn@latest add https://sundaeui.dev/r/mini-player.json. The files are written to components/sundae/. It has no dependencies beyond React 18 or later.
- Does Mini Player support keyboard and screen readers?
- Seek is a native range input with aria-valuetext ("0:38 of 3:34"). Play, previous and next are labelled buttons.
- Does Mini Player respect reduced motion?
- Reduced motion stops the equaliser and path morph.
More like this
All components →Podcast Chapters
Components · RefinedVoice Note
Components · RefinedMixer Faders
Components · RefinedLightbox Gallery
Components · Refined- Pro
Voice Recorder
Components · Refined Synced Lyrics
Components · Refined