H
UI by hampton.io
Back to Components
Cards

Hover Border Gradient Card

Card with an animated gradient border that energizes on hover.

PropsUsage ExampleVariations
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

Related Cards Components

Ambient Glow Card

A feature card with a rotating ambient aura for premium highlights.

Animated Card Hover

Hover tilt card with optional glare and depth effect.

Animated Gradient Border Card

Card with a rotating gradient border for premium emphasis.

Bento Card

Card component for bento grid layouts. Supports multiple sizes (1x1, 2x1, 1x2, 2x2) with optional gradient backgrounds.

Bento Grid

Asymmetric bento layout tiles with ambient glow and shine animations.

Card

Flexible card container with header, content, and footer sections.