Mini Player

Pro

Now-playing bar you drag up into the full player: the artwork grows out of its thumbnail as one piece, the screen behind recedes with your finger, and a sideways swipe slides in the next track.

Preview

Installation

npx @lumioui/cli add pro/mini-player

Usage

import { useMiniPlayerProgress, MiniPlayer, MiniPlayerBackdrop } from "@/components/ui/mini-player/mini-player";
<MiniPlayer />

Also exported: useMiniPlayerProgress, MiniPlayerBackdrop.

Examples

Podcast with chapters

A podcast app's Up Next feed with a glass now-playing bar floating over it.

API reference

MiniPlayer

Prop Type Default
track* MiniPlayerTrack —
nextTrack MiniPlayerTrack

The track a left swipe brings in — previewed sliding into the bar.

 —
previousTrack MiniPlayerTrack

The track a right swipe brings in.

 —
playing boolean

Playing state (controlled).

 false
onToggle () => void —
onSkipBack () => void

Skip handlers. Without one, that swipe direction refuses with a flicker and the matching button is hidden.

 —
onSkipForward () => void —
onSeek (position: number) => void

Seek to a 0–1 position (scrubber drag/tap, accessibility adjust).

 —
expanded boolean

Expanded state (controlled).

 —
defaultExpanded boolean

Initial expanded state when uncontrolled. Default false.

 false
onExpandChange (expanded: boolean) => void —
onDismiss () => void

Dismiss the whole player (X on the bar).

 —
progress SharedValue<number>

Share the 0–1 open progress with the host — pass the same value to MiniPlayerBackdrop so the screen behind recedes with the drag.

 —
dockOffset number

Gap between the bar and the bottom of the player's parent — the tab bar's height when the bar docks above one. Default 8.

 BAR_MARGIN
glass boolean

Render the collapsed bar as Lumio glass — only when it floats over scrolling content or artwork. The full player is always solid.

 false
className string —

MiniPlayerBackdrop

Prop Type Default
progress* SharedValue<number>

The same progress value passed to MiniPlayer.

 —
className string —