Command Palette

Search for a command to run...

Loading component...

Components free Music toggle btn

Music toggle btn

Interactive music player with animated waveform visualization. Features a clickable button that plays/pauses audio with real-time animated bars that respond to the music state. Perfect for creating engaging audio controls with smooth spring animations.

Dependencies

framer-motionuse-sound

Interaction Type

Click to play/pause music
Watch the animated waveform bars

with shacn cli3.0

//components.json
  "registries": {
    "@skiper-ui": "https://skiper-ui.com//registry/{name}.json"
  }
npx shadcn add @skiper-ui/skiper25

OR with old shacncli

 npx shadcn@latest add https://skiper-ui.com/registry/skiper25.json

How to use

import { MusicToggleButton } from "@/components/v1/skiper25";

// Using just the music toggle button
const DemoSkiper25Button = () => {
  return (
    <main className="flex h-screen w-full items-center justify-center">
      <MusicToggleButton />
    </main>
  );
};
Props
Description

none

Self Contained Component

Customization

const [play, { pause, sound }] = useSound("/audio/your-custom-audio.mp3", {
  loop: true,
  onplay: () => setIsPlaying(true),
  onend: () => setIsPlaying(false),
  onpause: () => setIsPlaying(false),
  onstop: () => setIsPlaying(false),
  soundEnabled: true,
});

Source code

Click on the top right
to view the source code

Keep in mind

Most components here are recreations of the best out there. I don't claim to be the original creator. This is my attempt to reverse-engineer, replicate, and often add a few extra features. I've tried to credit everyone, but if I missed something, let me know.

Contact

Additionlly, if you find any bug or issue, feel free to
Drop a dm.

License & Usage:

  • Free to use and modify in both personal and commercial projects.
  • Attribution to Skiper UI is required when using the free version.
  • No attribution required with Skiper UI Pro.
PreviousNext