Skip to main content

​
Installation

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

​
Usage

import { LiquidGlassCard, LiquidButton } from "@/components/kokonutui/liquid-glass-card";

export default function Example() {
  return (
    <LiquidGlassCard>
      <h3>Your Content Here</h3>
      <p>Card content with glass effect</p>
      <LiquidButton>Click Me</LiquidButton>
    </LiquidGlassCard>
  );
}

​
Components

​
LiquidGlassCard

Main card component with liquid glass effect using SVG displacement filters.

​
Props

PropTypeDefaultDescription
glassSize"sm" | "default" | "lg""default"Size variant for card padding
glassEffectbooleantrueEnable/disable glass effect
classNamestring-Additional CSS classes
childrenReactNode-Card content

​
LiquidButton

Button component with liquid glass effect.

​
Props

PropTypeDefaultDescription
liquidVariant"default" | "none""default"Liquid effect variant
Inherits all props from shadcn Button

​
Features

  • SVG filter-based glass distortion effect
  • Customizable glass filter scale
  • Hover shimmer animations
  • Multiple size variants
  • Built on shadcn/ui Card component
  • Fully accessible

​
Example: Music Player

The component includes a complete music player demo (NotificationCenter) showcasing:
  • Play/pause controls
  • Progress bar with seeking
  • Volume visualization bars
  • Time formatting
  • Responsive design

​
Dependencies

  • @/components/ui/button (shadcn)
  • @/components/ui/card (shadcn)
  • class-variance-authority
  • lucide-react
  • next/image
  • @/lib/utils

​
Technical Details

The glass effect uses SVG feTurbulence, feDisplacementMap, and feGaussianBlur filters to create a liquid distortion effect. The filter is applied via backdropFilter CSS property with a unique ID per component instance.

Build docs developers (and LLMs) love

Get started for freeTalk to us