# Mini Player

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.

> Composed · Pro · Mobile-Native — React Native, Expo Go incompatible (dev build required).

## Install

```bash
npx @lumioui/cli add pro/mini-player
```

## Import

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

## Variants

- `player` — Podcast with chapters: `npx @lumioui/cli add pro/mini-player-player`

## Props

### MiniPlayer

| Prop | Type | Notes |
| --- | --- | --- |
| `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). |
| `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. |
| `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. |
| `glass?` | `boolean` | Render the collapsed bar as Lumio glass — only when it floats over  scrolling content or artwork. The full player is always solid. |
| `className?` | `string` | — |

### MiniPlayerBackdrop

| Prop | Type | Notes |
| --- | --- | --- |
| `progress` | `SharedValue<number>` | The same progress value passed to MiniPlayer. |
| `className?` | `string` | — |

## Icons rendered

- `skip-forward` — /icons.html?i=skip-forward
- `x` — /icons.html?i=x
- `music` — /icons.html?i=music
- `skip-back` — /icons.html?i=skip-back

Source: https://lumioui.com/components/mini-player