Components
Border Beam Corner Cut
A corner cut card with a spinning border beam.
npx neonblade add border-beam-corner-cut-cardBeam Variants
Single
Dual
Gradient
Rainbow
Pulse
Colors
Pink
Default preset.
Cyan
Neon cyan.
Green
Neon green.
#ff6600
Any CSS color.
Glow Intensity
None
Low
Medium
High
Corners
BR
BL
TR
TL
All
Sizes
Small
Compact padding.
Medium
Default size.
Large
More room.
XLarge
Max padding.
With Icon + Content
Dual Beam
Two beams rotating in opposite directions.
Gradient Sweep
Wide blending beam with high ambient glow.
Rainbow All-Cut
Continuous neon spectrum on every corner.
Props Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Free-form slot rendered below the optional title/description. |
icon | ReactNode | - | Element rendered inside the top icon box (e.g. a Lucide icon). |
title | string | - | Card heading text. |
description | string | - | Body copy rendered below the title. |
beamColor | "cyan" | "pink" | "green" | string | "pink" | Primary beam color. Preset name or any CSS color. |
beamColorB | "cyan" | "pink" | "green" | string | "cyan" | Secondary beam color used in "dual" and "gradient-sweep" variants. |
variant | "single" | "dual" | "gradient-sweep" | "rainbow" | "pulse" | "single" | Beam animation style. "dual" spins two beams in opposite directions; "gradient-sweep" blends colorA→colorB; "rainbow" cycles all neon hues; "pulse" breathes in opacity. |
duration | number | 4 | Primary beam rotation speed in seconds. |
durationB | number | 6 | Secondary beam rotation speed in seconds (dual variant only). |
borderWidth | number | string | "2px" | Visible beam border width — becomes the padding between outer and inner card. |
size | "sm" | "md" | "lg" | "xl" | "md" | Controls inner padding, icon box size and font sizes. |
corner | "bottom-right" | "bottom-left" | "top-right" | "top-left" | "all" | "bottom-right" | Which corner(s) receive the diagonal cut. |
cornerSize | number | 20 | Depth of the diagonal corner cut in pixels. |
glowIntensity | "none" | "low" | "medium" | "high" | "medium" | Ambient neon glow spread on the inner card surface. |
bgColor | string | - | Override the inner card background color (default: var(--background)). |
innerClassName | string | "" | Extra className applied to the inner content div. |