Components

Notch Card

Futuristic card with rectangular notch indentations on any sides, beam border, gradient border, and hover effects.

npx neonblade add notch-card

Default (top + bottom notches)

Cyber Unit

Default top & bottom notches with cyan border.

Power Core

Pink accent with high glow intensity.

Defense Grid

Green accent with gradient border.

Notch Sides

Top Only

Bottom Only

Left + Right

All Sides

Beam Variants

Single

Dual

Gradient Sweep

Rainbow

Pulse

Hover Effects

Glow

Hover me.

Scan

Hover me.

Pulse

Hover me.

Lift

Hover me.

Sizes

SM

Size demo.

MD

Size demo.

LG

Size demo.

XL

Size demo.

Custom Colors

Neural Link

Custom violet accent with beam and high glow.

Notch Shape

Narrow & deep

notchWidth=30 · notchSize=18

Wide & shallow

notchWidth=120 · notchSize=6

Steep walls

notchSkew=4 · tight diagonal entry

Gradual walls

notchSkew=28 · shallow diagonal entry

H wider than V

notchWidth=100 · notchWidthV=30

V wider than H

notchWidth=30 · notchWidthV=100

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.
`notchSides`	`("top" \| "bottom" \| "left" \| "right")[]`	`["top", "bottom"]`	Sides that receive notch indentations. At least one side must be provided.
`notchSize`	`number`	`12`	Depth of each notch indentation in pixels.
`notchWidth`	`number`	`50`	Width of the flat notch floor on top & bottom edges in pixels.
`notchWidthV`	`number`	`notchWidth`	Width of the flat notch floor on left & right edges in pixels. Falls back to notchWidth when omitted.
`notchSkew`	`number`	`12`	Horizontal run of the angled entry/exit walls in pixels. Larger = shallower / more gradual angle.
`borderWidth`	`number \| string`	`"2px"`	Border thickness — becomes the padding between outer and inner card.
`borderColor`	`"cyan" \| "pink" \| "green" \| string`	`"cyan"`	Primary border color. Preset name or any CSS color.
`borderColorB`	`"cyan" \| "pink" \| "green" \| string`	`"pink"`	Secondary border color used when borderGradient is true.
`borderGradient`	`boolean`	`false`	Use a linear gradient as the static border instead of a solid color.
`beamVariant`	`"none" \| "single" \| "dual" \| "gradient-sweep" \| "rainbow" \| "pulse"`	`"none"`	Animated beam on the border. "none" uses a static border color.
`beamColor`	`"cyan" \| "pink" \| "green" \| string`	`"cyan"`	Primary beam color.
`beamColorB`	`"cyan" \| "pink" \| "green" \| string`	`"pink"`	Secondary beam color — used in "dual" and "gradient-sweep" variants.
`beamDuration`	`number`	`4`	Primary beam rotation speed in seconds.
`beamDurationB`	`number`	`6`	Secondary beam rotation speed in seconds (dual variant only).
`cardColor`	`string`	-	Override the inner card background color (default: var(--background)).
`textColor`	`string`	-	Text color applied to the inner content wrapper.
`accentColor`	`"cyan" \| "pink" \| "green" \| string`	-	Accent color for glow and hover highlights. Defaults to borderColor.
`glowIntensity`	`"none" \| "low" \| "medium" \| "high"`	`"medium"`	Ambient neon glow spread on the inner card surface.
`hoverEffect`	`"glow" \| "scan" \| "pulse" \| "lift" \| "none"`	`"glow"`	Hover animation style. "scan" sweeps a light stripe; "lift" raises the card; "pulse" pulses the glow.
`align`	`"start" \| "center"`	`"start"`	Horizontal alignment of card content (icon, title, description, children).
`size`	`"sm" \| "md" \| "lg" \| "xl"`	`"md"`	Controls inner padding and font sizes.
`innerClassName`	`string`	`""`	Extra className applied to the inner content div.