H
UI by hampton.io
Back to Components
Cards

Animated Gradient Border Card

Card with a rotating gradient border for premium emphasis.

PropsUsage ExampleVariations

Motion

Animated Gradient Border

A continuous gradient sweep that frames key content.

Dependencies

  • clsx
  • tailwind-merge

Files

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

Installation

Using shadcn CLI

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

Manual installation

Copy the component file to your project and install dependencies:

npm install clsx tailwind-merge

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.

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.

CTA Banner

A call to action banner with headline, supporting copy, and primary or secondary actions.