Components
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.
Loading preview...
import {
Card,
CardHeader,
CardTitle,
CardDescription,
CardContent,
CardFooter,
} from "@/components/ui/electric-card";
export default function ElectricCardDemo() {
return (
<Card electricColor="blue">
<CardHeader>
<CardTitle>Electric Border Card</CardTitle>
<CardDescription>
Built on top of a standard, reusable Card component.
</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>
);
}Loading preview...