Liquid Glass

Component 54

About

Here is Liquid Glass component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Liquid Glass to your project and fits it to your theme.

Code

How Liquid Glass is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import { LiquidGlass } from "@/components/ui/liquid-glass";

export const Demo = () => {
    return (
        <div className="relative cursor-none overflow-hidden">
            <img
                src="https://cdn.21st.dev/assets/mirror/98/98a5736c4b189e582d86eed0811d951d8c40e99488c632a8c1e38e64ddca266f.jpg"
                alt="Background"
                className="aspect-square max-w-144 rounded-md object-cover"
            />
            <LiquidGlass borderRadius={60} blur={1} />
        </div>
    );
};


export default Demo;