Magic Card

gradient x border

Card with animated gradient border rotation. From Magic UI.

cardmagicgradientmagicui

Magic Card

Animated gradient border

Code

card-magic.tsx

export function MagicCard({ children }: { children: React.ReactNode }) {
  return (
    <div className="relative rounded-xl bg-card p-px">
      <div className="absolute -inset-1 animate-[spin_4s_linear_infinite] rounded-xl bg-gradient-to-r from-violet-500 via-cyan-500 to-violet-500 opacity-30" />
      <div className="relative rounded-xl bg-card p-6">{children}</div>
    </div>
  );
}

Use it in another build

Paste the code into a component file, keep your project tokens (background, brand, radius) and it themes itself. Or tell Claude Code: “add the Magic Card component and wire it to my accent.”