Glass Card

Frosted glass surface with backdrop blur, a subtle highlight gradient and a hairline border — the glasscn look in one div.

glassmorphismcardblur

GlassCN style

Frosted card

Backdrop blur and a soft border over any colourful surface.

Usage

Drop the file into your project and import it. There is no package to install.

usage.tsx

import { GlassCard } from "@/registry/components/glass-card";

export function Example() {
  return <GlassCard />;
}

Every component here relies only on Tailwind and the cn helper from shadcn/ui.

terminal

npm i clsx tailwind-merge

Avatar Stack

Overlapping avatars with an overflow counter and a lift on hover. Falls back to initials when no image is supplied.

Glow Button

A pill button with a sweeping specular highlight and a soft brand-coloured bloom behind it. Both effects are hidden under reduced motion.

Copy Button

One-click clipboard copy with a checkmark confirmation. Uses the Clipboard API and resets after 1.6 seconds.