BlockDex

Components

Registries

Free blocks

Method

BlockDex

Components

Registries

Free blocks

Method

Open API

BlockDex

Components

Registries

Free blocks

Method

Open API

Components/shadcn/ui/music-player-demo1

Music Player Demo 1

nyxui/music-player-demo1
FreeExample

Example showing a music player.

Live preview

live · rendered by the registry
Rendered by shadcn/ui on their own page — this is the component running, not a screenshot of it.

Install it

npx shadcn@latest add https://nyxui.com/r/music-player-demo1.json

Source

registry/example/music-player-demo1.tsxnyxui.com/r/music-player-demo1.json
1import { MusicPlayer, Track } from "../ui/music-player";
2
3export default function MusicPlayerDemo1() {
4 const currentTrack: Track = {
5 id: "1",
6 title: "Changes",
7 artist: "XXXTENTACION",
8 album: "?",
9 artwork: "/assets/images/music-player/cover.jpg",
10 duration: 194,
11 };
12 return (
13 <div className="w-full max-w-sm mx-auto rounded-md relative">
14 <MusicPlayer
15 theme="midnight"
16 currentTrack={currentTrack}
17 currentIndex={0}
18 initialTime={30}
19 autoPlay={false}
20 showEqualizer={true}
21 className="rounded-xl"
22 />
23 </div>
24 );
25}

What it pulls in

Other registry items

  • https://nyxui.com/r/music-player.json

Files it writes

  • registry/example/music-player-demo1.tsx

Facts

Registry
shadcn/ui
Type
registry:example
Access
Free
Files written
1
Licence
the repository states none
First indexed
2026-08-03
Last confirmed
yesterday

Go to the source

Docs on shadcn/ui nyxui.com MihirJaiswal/nyxui on GitHub Raw registry item This item as JSON

More from shadcn/ui

All 68 items
Same registry, same kind — the ones you would have found next
ComponentRegistryKindAccessInstallsCommand
3D Layered Card Demo3d-layered-card-demoshadcn/uiExamplesFreeno deps
Animated Code Block Demoanimated-code-block-demoshadcn/uiExamplesFreeno deps
Animated Grainy Background Demoanimated-grainy-bg-demoshadcn/uiExamplesFreeno deps
Animated Text Demoanimated-text-demoshadcn/uiExamplesFreeno deps
Apple Glass Effect Demoapple-glass-effect-demoshadcn/uiExamplesFreeno deps
Bubble Background Demobubble-background-demoshadcn/uiExamplesFreeno deps
Custom Cursor Democustom-cursor-demoshadcn/uiExamplesFreeno deps
Cyberpunk Card Democyberpunk-card-demoshadcn/uiExamplesFreeno deps
BlockDex

Built by

Kynth Studio

Index

Components
Registries
Method
Open API

Guides

shadcn component libraries
Best shadcn registries
Free shadcn blocks

Reference

Corpus counts
Crawl health
hello@kynth.studio
Privacy
Terms

BlockDex

BlockDex

Built by

Kynth Studio

Index

Components
Registries
Method
Open API

Guides

shadcn component libraries
Best shadcn registries
Free shadcn blocks

Reference

Corpus counts
Crawl health
hello@kynth.studio
Privacy
Terms

BlockDex

BlockDex

Built by

Kynth Studio

Index

Components
Registries
Method
Open API

Guides

shadcn component libraries
Best shadcn registries
Free shadcn blocks

Reference

Corpus counts
Crawl health
hello@kynth.studio
Privacy
Terms

BlockDex