Electric Card

Cards

About

A composable card component featuring a captivating, animated electric border effect. Built on a standard, reusable card structure, it's easy to integrate into any project. The component is fully responsive and allows for customization of the electricity color through a simple prop. It's perfect for drawing attention to key information, featured content, or premium features in a visually striking way.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Electric Card to your project and fits it to your theme.

Code

How Electric Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from "@/components/ui/electric-card";

export default function ElectricCardDemo() {
  return (
    <Card>
      <CardHeader>
        <CardTitle>Electric Card</CardTitle>
        <CardDescription>
         Card that has energy. Use it anywhere everywhere
        </CardDescription>
      </CardHeader>
      <CardContent>
        <p>
          simple . clean . electric
        </p>
      </CardContent>
      <CardFooter>
        <button className="w-full bg-primary text-primary-foreground h-10 px-4 py-2 inline-flex items-center justify-center rounded-md text-sm font-medium">
          Proceed
        </button>
      </CardFooter>
    </Card>
  );
}