Browse components
Media Card
Music player card with cover art, a scrubbable progress bar, a morphing play/pause icon and a live equalizer.
Installation
npx shadcn@latest add @glint-ui/media-cardFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/media-card.json
Usage
import { MediaCard } from "@/components/ui/media-card";
<MediaCard
tracks={[{ title: "Midnight Transit", artist: "Nova Harbor", cover: "/cover.jpg", duration: 214 }]}
accent="#a3e635"
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| tracks | ReactNode | — | Array of { title, artist, cover, duration } (duration in seconds). |
| accent | string | "#a3e635" | Progress, play button and equalizer color. |
| autoPlay | boolean | false | Start playing on mount. |
| bars | number | 4 | Number of equalizer bars. |
| glow | boolean | true | Blurred cover glow behind the card. |
| className | string | — | Extra classes for the root element. |