A
Auralix UI

Glass Card

A modern, frosted glass effect card for premium UI designs.

Preview

Low Intensity

Subtle frost effect that lets more background through.

Backdrop Blur Sm

Medium Intensity

Balanced blur perfect for most overlays and cards.

Backdrop Blur Md

High Intensity

Strong frost effect for maximum readability.

Backdrop Blur Xl

Installation

bash
npx auralix-ui add glass-card

Usage

Glass Intensities

tsx
import { GlassCard } from "@/components/ui/GlassCard";

<GlassCard intensity="low" className="p-6">
  <h3 className="text-lg font-bold mb-2">Low Intensity</h3>
  <p>Subtle frosted glass effect.</p>
</GlassCard>

<GlassCard intensity="medium" className="p-6">
  <h3 className="text-lg font-bold mb-2">Medium Intensity</h3>
  <p>Balanced blur and opacity.</p>
</GlassCard>

<GlassCard intensity="high" className="p-6">
  <h3 className="text-lg font-bold mb-2">High Intensity</h3>
  <p>Strong frosted glass effect.</p>
</GlassCard>

Props

NameTypeDefaultDescription
intensity"low" | "medium" | "high""medium"The intensity of the blur and opacity.
childrenReactNode-Card content.
Neon ButtonBlur Text