Glass Card

A glass card component with frosted glass effects, subtle shadows, and interactive highlights. It renders a styled card with blur, tint, and refractive elements. Use it to create modern, visually appealing cards in a UI.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/glass-card

npx layro-cli add @educlopez/glass-card

npx layro-cli add @educlopez/glass-card

bunx layro-cli add @educlopez/glass-card

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Demo

"use client";

import { cn } from "@/lib/utils";
import { motion, useReducedMotion, useSpring } from "motion/react";
import {
  type CSSProperties,
  type ReactNode,
  type PointerEvent as ReactPointerEvent,
  useCallback,
  useEffect,
  useId,
  useState,
} from "react";