KokonutUI Logo

CD-03CardsUpdated, October 14, 2026

Now Playing

Music card with a spinning disc you can grab and turn to scrub, built with React and Tailwind CSS.

Install with
class-variance-authority, lucide-react

PROOnboarding Checklist and more like it are in Kokonut UI Pro

Installation

Now Playing is a free, open-source React component in the Kokonut UI Cards collection. Add it with the shadcn CLI, which copies the source into components/kokonutui/liquid-glass-card.tsx, so the code is yours to change.

npx shadcn@latest add @kokonutui/liquid-glass-card

Usage

import NowPlaying from "@/components/kokonutui/liquid-glass-card";

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

Dependencies

Built with React, Tailwind CSS, class-variance-authority and lucide-react. The CLI also adds the shadcn/ui card and button components.

On this page

No Headings