Border Beam
A container with a beam of light that keeps travelling around its border. Draws the eye to pricing tiers, CTAs or new features.
Import
import { BorderBeam } from "@igorao79/uivix";Examples
Pricing card
Pro
$12 / month
- ✓ Unlimited projects
- ✓ All components
- ✓ Priority support
Custom beam
Faster, longer and warmer
🔥 New: 13 interactive components just landed.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| colorFrom | string | "#a78bfa" | Beam tail color |
| colorTo | string | "#22d3ee" | Beam head color |
| duration | number | 4 | Seconds per lap |
| borderWidth | number | 1.5 | Border width in px |
| beamLength | number | 0.2 | Beam length as a share of the perimeter (0..1) |
| className | string | - | Additional CSS classes |