Cards

Glow Border Card

#card#glow#border

Modern Auth

Implement secure authentication flows with just a few lines of code. Built for the modern web.

implementedInfinityUI component

This component is fully implemented in InfinityUI and wired into the docs and registry flow.

Installation

Use the registry command to add the component source, and install any package dependencies if needed.

Infinity Registry

Install the component source into your project with the shadcn CLI.

npx shadcn@latest add https://infinityui-pearl.vercel.app/r/glow-border-card

Package Dependencies

Install the npm packages used by this component source.

npm install framer-motion

Component Code

Copy and paste this code into your component file.

tsx

"use client";

import { useRef, useState, ReactNode } from "react";
import { motion, useMotionTemplate, useMotionValue } from "framer-motion";

interface GlowBorderCardProps {
    children: ReactNode;
    className?: string;
}

export function GlowBorderCard({ children, className = "" }: GlowBorderCardProps) {
    const mouseX = useMotionValue(0);
    const mouseY = useMotionValue(0);

    const handleMouseMove = ({ clientX, clientY, currentTarget }: React.MouseEvent) => {
        const { left, top } = currentTarget.getBoundingClientRect();
        mouseX.set(clientX - left);
        mouseY.set(clientY - top);
    };

    return (
        <div
            className={`group relative max-w-md rounded-2xl bg-zinc-900 border border-white/5 overflow-hidden ${className}`}
            onMouseMove={handleMouseMove}
        >
            <motion.div
                className="pointer-events-none absolute -inset-px rounded-2xl opacity-0 transition duration-300 group-hover:opacity-100"
                style={{
                    background: useMotionTemplate`
            radial-gradient(
              400px circle at ${mouseX}px ${mouseY}px,
              rgba(99, 102, 241, 0.4),
              transparent 80%
            )
          `,
                }}
            />
            {/* The inner content area */}
            <div className="relative h-full w-full rounded-2xl bg-zinc-950/80 p-8 m-[1px] shadow-2xl backdrop-blur-xl">
                {children}
            </div>
        </div>
    );
}