Electric Border
NewPro
A border that crackles like electricity and surges when you hover or focus it.
Power-up
Double XP
Every run counts twice for the next 24 hours. Stacks with streak bonuses.
Customize
#ffc24a
12px
1
2px
Installation
Electric Border is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy electric-border.tsx into components/ui and run npm install motion.
Usage
import { ElectricBorder } from "@/components/ui/electric-border";
<ElectricBorder color="#ffc24a" chaos={12} radius={28}>
<div className="p-7">Double XP</div>
</ElectricBorder>Props
7 properties| Property | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | Content inside the border. |
| color | string | "#ffc24a" | Color of the current. |
| thickness | number | 2 | Line thickness, in pixels. |
| chaos | number | 12 | How far the line strays from the edge, in pixels. |
| speed | number | 1 | How fast the current flickers. 1 is the default pace. |
| radius | number | 24 | Corner radius, in pixels. |
| className | string | — | Extra classes for the frame, such as its width. |
Dependencies: motion