Glowing Border
An animated glowing gradient border.
npx arupui add glowing-border
Preview
Glowing Card
A card with an animated glowing border.
Usage
glowing-border.tsx
import { GlowingBorder } from "@/components/blocks/glowing-border"
<GlowingBorder>
<h3>Content</h3>
</GlowingBorder>Props
| Prop | Type | Default |
|---|---|---|
gradientColors | string[] | ["#7c3aed", "#2563eb", "#06b6d4"] |
borderWidth | number | 2 |
duration | number | 3 |
gradientColorsType:
string[]Default: ["#7c3aed", "#2563eb", "#06b6d4"]borderWidthType:
numberDefault: 2durationType:
numberDefault: 3