Now Playing
betaA compact music mini-player that expands in place, with a morphing play button, a like and a seek slider.
- Display
- 1 file
- 1 npm package
- Accessibility notes
Loading the example…
pnpm dlx @dowel-ui/cli add now-playingnpm packages installed: class-variance-authority.
import { NowPlaying } from "@/components/ui/now-playing";Default
Gallery
<NowPlaying>
| Prop | Type | Default |
|---|---|---|
track (required)The track's title. | string | — |
artistThe artist, album or side. | string | — |
artworkAlbum art: an image URL, or any node. Decorative unless | string | ReactNode | — |
artworkAlt | string | "" |
defaultExpanded | boolean | false |
defaultLiked | boolean | false |
defaultPlaying | boolean | false |
defaultPosition | number | 0 |
durationTrack length in seconds. | number | 214 |
expanded | boolean | — |
labels | Partial<Record<"play" | "pause" | "previous" | "next" | "like" | "seek", string>> | {} |
liked | boolean | — |
onExpandedChange | (expanded: boolean) => void | — |
onLikedChange | (liked: boolean) => void | — |
onNextNext track. The position returns to 0. | () => void | — |
onPlayingChange | (playing: boolean) => void | — |
onPositionChange | (seconds: number) => void | — |
onPreviousRestart: called after the position returns to 0. | () => void | — |
playing | boolean | — |
position | number | — |
stroke | boolean | — |
Plus every attribute of <div> except onChange.
The track itself is the expand control: a button named by track and artist with aria-expanded. Restart, Play/Pause (its name follows the state), Next and a Like toggle (aria-pressed) are real buttons. Progress is a role="slider" with "0:52 of 3:34" value text: arrows seek 5 seconds (mirrored in right-to-left layouts), PageUp/PageDown 30, Home/End the ends, and Space plays or pauses while it has focus. Controls that are hidden while collapsed leave the tab order. Album art is decorative unless artworkAlt is given. Motion stops under reduced motion.
10/10
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — passes
- No fixed widths — passes