Command Palette

Search for a command to run...

0
Components
Previous

Apple Liquid Glass

Frosted glass hero with floating neon gradients and chrome sheen inspired by Apple launches.

Loading...

Installation

bunx --bun shadcn add @zephinax/liquid-glass

Usage

import { LiquidGlass } from "@/components/zephinax/liquid-glass";
 
export function Hero() {
  return (
    <LiquidGlass
      label="Liquid glass"
      title="Translucent depth with floating light"
      subtitle="A frosted hero with soft neon blooms and a subtle chrome sheen."
      accentColors={[
        "rgba(120, 200, 255, 0.42)",
        "rgba(170, 140, 255, 0.32)",
        "rgba(120, 255, 220, 0.28)",
      ]}
    >
      <div className="flex flex-wrap gap-2 text-xs text-white/80">
        {["Frosted", "Blurred", "Responsive"].map((chip) => (
          <span
            key={chip}
            className="rounded-full border border-white/20 bg-white/10 px-3 py-1 backdrop-blur"
          >
            {chip}
          </span>
        ))}
      </div>
    </LiquidGlass>
  );
}

Props

PropTypeDefaultDescription
labelstring"Liquid glass"Small uppercase label above the title.
titlestringMain heading text.
subtitlestringOptional supporting copy under the title.
childrenReactNodeExtra content such as badges or buttons.
accentColorsstring[]Soft blue/purple/mint blendUp to three accent colors for the glass blooms.
classNamestringAdditional classes for the outer wrapper.

Notes

  • Works best on dark or rich backdrops to highlight the glow.
  • Tweak accentColors for different moods (warm amber/rose, cool blues, or monochrome whites).