Browse components
Electric Border
Wraps any element in crackling, glowing arcs of electricity that crawl around its edge.
Installation
npx shadcn@latest add @glint-ui/electric-borderFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/electric-border.json
Usage
import { ElectricBorder } from "@/components/ui/electric-border";
<ElectricBorder color="#7df9ff" radius={24}>
<div className="p-8">Charged up</div>
</ElectricBorder>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Content to electrify. |
| color | string | "#7df9ff" | Arc and glow color. |
| speed | number | 1 | Animation speed multiplier. |
| chaos | number | 1 | How far the arcs stray from the edge. |
| thickness | number | 2 | Line width in px. |
| radius | number | 24 | Corner radius in px. |
| className | string | — | Extra classes for the root element. |