Components
Neon Input
A fully-featured text input with the iconic NeonBlade corner-cut shape, neon focus glow, full color customization, label, hint, error state, prefix/suffix slots, border styles, background opacity, and all standard HTML input types.
npx neonblade add neon-inputSearch
Corner Cuts
Border Styles
Background Opacity
States
Login Form
System Access
Enter your credentials to continue
Props Configuration
| Prop | Type | Default | Description |
|---|---|---|---|
shape | "corner-cut" | "rectangle" | "rounded" | "corner-cut" | Input field shape. "corner-cut" applies the iconic NeonBlade diagonal clip. "rectangle" uses sharp square corners. "rounded" applies a soft border-radius. |
corner | "bottom-right" | "bottom-left" | "top-right" | "top-left" | "tl-br" | "bl-tr" | "all" | "bottom-right" | Which corner(s) receive the diagonal cut. Single: "bottom-right", "bottom-left", "top-right", "top-left". Diagonal pairs: "tl-br" (top-left + bottom-right), "bl-tr" (bottom-left + top-right). "all" cuts all four corners. Only applies when shape is corner-cut. |
cornerSize | number | 12 | Depth of the diagonal corner cut in pixels. Only applies when shape is corner-cut. |
borderStyle | "full" | "bottom" | "none" | "full" | "full" draws a border on all sides including the diagonal cut edge. "bottom" shows only a bottom underline (shape/corner are ignored). "none" renders the input without any border. |
color | "cyan" | "pink" | "green" | "orange" | "purple" | "red" | string | "cyan" | Main accent color — drives the border, focus glow, caret, and prefix/suffix icon tint. Accepts a preset name or any CSS color value. |
borderColor | string | — | Override the default border color. Falls back to `color` when not set. |
hoverColor | string | — | Border color on hover. Falls back to `color` when not set. |
focusColor | string | — | Border and glow color when the input is focused. Falls back to `color` when not set. |
bgColor | string | "#0a0f14" | Background color of the input field. |
bgOpacity | number | 100 | Background opacity as a percentage (0–100). 100 = fully opaque, 0 = fully transparent. Combines with bgColor — e.g. bgColor="cyan" bgOpacity={20} gives a subtle tinted transparent background. |
textColor | string | "#e0f8ff" | Color of the typed value text. |
placeholderColor | string | — | Color of the placeholder text. Defaults to the accent color at 35% opacity. |
label | string | — | Optional label rendered above the input in font-orbitron uppercase. |
labelColor | string | — | Color of the label. Defaults to the accent color at 65% opacity. |
hint | string | — | Helper text shown below the input in a muted color. |
hintColor | string | — | Color of the hint text. |
error | string | — | Error message. When set the border turns red and this message is shown below the input instead of hint. |
variant | "outline" | "filled" | "outline" | "outline" uses the bgColor background with a full border. "filled" adds a subtle accent-tinted background on top of bgColor. |
size | "sm" | "md" | "lg" | "md" | Controls padding, height, and font size of the input. |
glowIntensity | "none" | "subtle" | "normal" | "strong" | "normal" | Spread of the neon drop-shadow emitted when the input is focused. |
prefix | ReactNode | — | Node rendered before the input text — ideal for icons or short strings. |
suffix | ReactNode | — | Node rendered after the input text — ideal for icons, action buttons, or unit labels. |
type | "text" | "password" | "email" | "number" | "search" | "tel" | "url" | string | "text" | Native HTML input type. All standard values are supported — passwords render as dots, number shows spinners, etc. |
disabled | boolean | false | Disables the input and reduces opacity. |
className | string | — | Extra class names applied to the outermost wrapper div. |
inputClassName | string | — | Extra class names applied directly to the native <input> element. |