Components
Neon Glow Corner Cut Card
A corner cut card with a neon gradient glow backdrop, icon box, and fully customizable colors, sizes and hover effects.
npx neonblade add neon-glow-corner-cut-cardHover Effects (hover each card)
Gradient
Dual-color gradient glow backdrop on hover.
Solid
Single accent-color backdrop on hover.
Glow Only
Box-shadow glow — no backdrop layer.
Pulse
Continuously pulsing glow while hovered.
Trace
Gradient with animated hue rotation.
None
No glow — icon and title transitions only.
Colors
Cyan / Pink
Default gradient preset.
Pink / Cyan
Reversed gradient.
Green / Cyan
Neon green accent.
Custom
Any CSS color value.
Sizes
Small
Compact padding.
Medium
Default size.
Large
More breathing room.
XLarge
Maximum padding.
Corners
BR Cut
BL Cut
TR Cut
TL Cut
All Cut
Hero replica (Features grid style)
CLI Installation
Install components directly into your project via CLI without bloated dependencies.
Futuristic Aesthetics
High-end, dynamic UI featuring clip-paths, neon glows, and micro-animations.
Props Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | - | Free-form slot rendered below title/description. Use alone for a fully custom card body. |
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. |
colorA | "cyan" | "pink" | "green" | string | "cyan" | Gradient start color and icon/title glow color. Accept preset names or any CSS color. |
colorB | "cyan" | "pink" | "green" | string | "pink" | Gradient end color used in "gradient" and "trace" hover effects. |
size | "sm" | "md" | "lg" | "xl" | "md" | Controls inner card padding, icon box, 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. |
hoverEffect | "gradient" | "solid" | "glow-only" | "pulse" | "trace" | "none" | "gradient" | Hover glow style. "gradient" matches the Features.tsx card exactly. |
glowIntensity | "low" | "medium" | "high" | "medium" | Spread radius of the neon glow effects. |
bgColor | string | - | Override the inner card background color (default: #0a0a0a). |