Command Palette

Search for a command to run...

Components/Morphing Play/Pause Button

Morphing Play/Pause Button

A morphing play/pause button with smooth SVG path animations using Motion spring transitions.

Sunny clouds - Billy Huynh
Light Context
Dark abstract neon - Jatin Gajjar
Dark Context
import PlayPauseButton from "@/components/ui/play-pause-button"

export default function Example() {
  return <PlayPauseButton />
}

Installation

pnpm dlx shadcn@latest add https://www.roshansahu.site/r/morphing-play-pause-button.json

Usage

Import the component in your project pages.

import PlayPauseButton from "@/components/ui/play-pause-button"

export default function Example() {
  return <PlayPauseButton />
}

API Reference

Configure your component behavior using these props.

PropTypeDefaultDescription
theme"light" | "dark""light"Visual theme for the button icon color.