Liquid Glass Card

A card component with a glassy, liquid-like appearance using shadows and blur effects. Ideal for modern UIs needing a sleek, transparent look.

bykokonut-labs from Kokonutui

Installation

terminal

pnpm dlx layro-cli add @kokonut-labs/liquid-glass-card

npx layro-cli add @kokonut-labs/liquid-glass-card

npx layro-cli add @kokonut-labs/liquid-glass-card

bunx layro-cli add @kokonut-labs/liquid-glass-card

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

/**
 * @author: @dorianbaffier
 * @description: Now Playing - music card with a spinning, scrubbable disc
 * @version: 2.0.0
 * @date: 2026-10-14
 * @license: MIT
 * @website: https://kokonutui.com
 * @github: https://github.com/kokonut-labs/kokonutui
 */

import { cva, type VariantProps } from "class-variance-authority";
import { Pause, Play, SkipBack, SkipForward } from "lucide-react";