Liquid Glass Card

A standalone 3D liquid glass card component featuring modular subcomponents (Header, Title, Description, Content, Footer), top curved glare reflection, bottom prism refraction, 7 color crystal variants, ambient glow, and hover elevation physics.

...

How to Import

Add this import to your component file

app/page.tsx

1import LiquidGlassCard, { LiquidGlassCardHeader, LiquidGlassCardTitle, LiquidGlassCardDescription, LiquidGlassCardContent, LiquidGlassCardFooter } from "@/components/lightswind/liquid-glass-card"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

variant	"glass" \| "emerald" \| "primary" \| "cyan" \| "purple" \| "aurora" \| "dark"	"glass"	Color crystal gradient variant controlling border reflections and depth.	Optional
glow	boolean	false	Add an ambient soft color glow surrounding the liquid card.	Optional
hoverEffect	boolean	true	Enable smooth hover elevation scaling (y: -4, scale: 1.01).	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import LiquidGlassCard, {
2  LiquidGlassCardHeader,
3  LiquidGlassCardTitle,
4  LiquidGlassCardDescription,
5  LiquidGlassCardContent,
6  LiquidGlassCardFooter,
7} from "@/components/lightswind/liquid-glass-card";
8import { LiquidGlassButton } from "@/components/lightswind/liquid-glass-button";
9
10export function Demo() {
11  return (
12    <LiquidGlassCard variant="aurora" glow hoverEffect className="max-w-md">
13      <LiquidGlassCardHeader>
14        <LiquidGlassCardTitle>Aurora AI Studio</LiquidGlassCardTitle>
15        <LiquidGlassCardDescription>Generative UI Builder</LiquidGlassCardDescription>
16      </LiquidGlassCardHeader>
17
18      <LiquidGlassCardContent>
19        <p className="text-xs leading-relaxed opacity-85">
20          Build 3D glassmorphic interfaces with real-time liquid lens refractions.
21        </p>
22      </LiquidGlassCardContent>
23
24      <LiquidGlassCardFooter className="justify-end">
25        <LiquidGlassButton variant="primary" size="sm">
26          Get Started
27        </LiquidGlassButton>
28      </LiquidGlassCardFooter>
29    </LiquidGlassCard>
30  );
31}

Variants

Different visual and behavioral variants of the component

Aurora Crystal Variant

Violet-fuchsia liquid crystal card with ambient glow.

Preview not available for this example.

Previousliquid-glass-button

Nextliquid-glass-chart

A product byＭＵＨＩＬＡＮ and Team❤️.

Liquid Glass Card

A standalone 3D liquid glass card component featuring modular subcomponents (Header, Title, Description, Content, Footer), top curved glare reflection, bottom prism refraction, 7 color crystal variants, ambient glow, and hover elevation physics.

...

How to Import

Add this import to your component file

app/page.tsx

1import LiquidGlassCard, { LiquidGlassCardHeader, LiquidGlassCardTitle, LiquidGlassCardDescription, LiquidGlassCardContent, LiquidGlassCardFooter } from "@/components/lightswind/liquid-glass-card"

Props

Properties and options for customizing this component

Name	Type	Default	Description	Required

variant	"glass" \| "emerald" \| "primary" \| "cyan" \| "purple" \| "aurora" \| "dark"	"glass"	Color crystal gradient variant controlling border reflections and depth.	Optional
glow	boolean	false	Add an ambient soft color glow surrounding the liquid card.	Optional
hoverEffect	boolean	true	Enable smooth hover elevation scaling (y: -4, scale: 1.01).	Optional

Basic Usage

Here’s a simple example of how to use this component

app/page.tsx

1import LiquidGlassCard, {
2  LiquidGlassCardHeader,
3  LiquidGlassCardTitle,
4  LiquidGlassCardDescription,
5  LiquidGlassCardContent,
6  LiquidGlassCardFooter,
7} from "@/components/lightswind/liquid-glass-card";
8import { LiquidGlassButton } from "@/components/lightswind/liquid-glass-button";
9
10export function Demo() {
11  return (
12    <LiquidGlassCard variant="aurora" glow hoverEffect className="max-w-md">
13      <LiquidGlassCardHeader>
14        <LiquidGlassCardTitle>Aurora AI Studio</LiquidGlassCardTitle>
15        <LiquidGlassCardDescription>Generative UI Builder</LiquidGlassCardDescription>
16      </LiquidGlassCardHeader>
17
18      <LiquidGlassCardContent>
19        <p className="text-xs leading-relaxed opacity-85">
20          Build 3D glassmorphic interfaces with real-time liquid lens refractions.
21        </p>
22      </LiquidGlassCardContent>
23
24      <LiquidGlassCardFooter className="justify-end">
25        <LiquidGlassButton variant="primary" size="sm">
26          Get Started
27        </LiquidGlassButton>
28      </LiquidGlassCardFooter>
29    </LiquidGlassCard>
30  );
31}

Variants

Different visual and behavioral variants of the component

Aurora Crystal Variant

Violet-fuchsia liquid crystal card with ambient glow.

Preview not available for this example.

Previousliquid-glass-button

Nextliquid-glass-chart

A product byＭＵＨＩＬＡＮ and Team❤️.

Liquid Glass Card

How to Import

Props

Basic Usage

Variants

Aurora Crystal Variant

On This Page

Contribute

Liquid Glass Card

How to Import

Props

Basic Usage

Variants

Aurora Crystal Variant

On This Page

Contribute

React Liquid Glass Card Component - Lightswind UI

Key Details of React Liquid Glass Card

Liquid Glass Card

How to Import

Props

Basic Usage

Variants

Aurora Crystal Variant

On This Page

Contribute

Liquid Glass Card

How to Import

Props

Basic Usage

Variants

Aurora Crystal Variant

On This Page

Contribute