H
UI by hampton.io
Get Started
Back to Components
Cards

Hover Border Gradient Card

Card with an animated gradient border that energizes on hover.

Hover Glow

Hover Border Gradient

A premium card edge that animates with a soft gradient on hover.

Dependencies

  • clsx
  • tailwind-merge
  • framer-motion

Files

  • components/ui/hover-border-gradient-card.tsx

Installation

Using shadcn CLI

npx shadcn add hover-border-gradient-card --url https://ui.hampton.io

Manual installation

Copy the component file to your project and install dependencies:

npm install clsx tailwind-merge framer-motion