Electric Border Card

1import { ElectricBorderCard } from "@/registry/ui/electric-border-card";
2
3export function ElectricBorderCardDefaultExample() {
4  return (
5    <div className="flex min-h-[320px] items-center justify-center rounded-xl bg-[#0d0d0d] p-8">
6      <ElectricBorderCard
7        className="w-full max-w-sm p-8"
8        radius={20}
9        arcColor="#00d3f2"
10        accentColor="#00d3f2"
11      >
12        <div className="space-y-2 text-center">
13          <p className="text-xs font-bold tracking-[0.2em] text-white/50 uppercase">
14            Hover to energize
15          </p>
16          <h3 className="text-lg font-semibold text-white">
17            Electric border card
18          </h3>
19          <p className="text-sm text-white/60">
20            <code className="text-cyan-400/90">arcColor</code> tints the
21            lightning; <code className="text-cyan-400/90">accentColor</code>{" "}
22            tints the hover shadow and glow.
23          </p>
24        </div>
25      </ElectricBorderCard>
26    </div>
27  );
28}

1import { Button } from "@/components/ui/button";
2import {
3  Card,
4  CardContent,
5  CardDescription,
6  CardFooter,
7  CardHeader,
8  CardTitle,
9} from "@/components/ui/card";
10import { ElectricBorderCard } from "@/registry/ui/electric-border-card";
11import { Zap } from "lucide-react";
12
13export function ElectricBorderCardWrappedCardExample() {
14  return (
15    <div className="flex min-h-[360px] items-center justify-center rounded-xl bg-[#0d0d0d] p-8">
16      <ElectricBorderCard
17        className="w-full max-w-md"
18        contentClassName="p-1"
19        radius={16}
20        arcColor="#009e0b"
21        accentColor="#004f18"
22      >
23        <Card className="border-0 bg-zinc-950/90 text-zinc-100 shadow-none">
24          <CardHeader className="gap-1">
25            <div className="mb-2 flex size-10 items-center justify-center rounded-lg bg-blue-500/15 text-blue-400">
26              <Zap className="size-5" strokeWidth={2} />
27            </div>
28            <CardTitle className="text-lg">Wrap any component</CardTitle>
29            <CardDescription className="text-zinc-400">
30              The electric border follows this card&apos;s bounds - drop in
31              forms, charts, or other UI as children.
32            </CardDescription>
33          </CardHeader>
34          <CardContent>
35            <p className="text-sm text-zinc-500">
36              This demo uses a dark green{" "}
37              <code className="text-green-500">accentColor</code> for the outer
38              glow and a light green{" "}
39              <code className="text-green-300">arcColor</code> for the lightning
40              stroke.
41            </p>
42          </CardContent>
43          <CardFooter>
44            <Button
45              type="button"
46              variant="secondary"
47              className="w-full bg-zinc-800 text-zinc-100 hover:bg-zinc-700"
48            >
49              Get started
50            </Button>
51          </CardFooter>
52        </Card>
53      </ElectricBorderCard>
54    </div>
55  );
56}