Interactive input

InteractiveInput is a highly customizable interactive input component with shimmer effects, glow, and visual styling options.

Installation

npx scrollx-ui@latest add interactive-input

Usage

import { InteractiveInput } from "@/components/ui/interactive-input";

<InteractiveInput
        className="bg-green-500 text-white"
        variant="default"
        inputSize="default"
        glow={true}
        rounded="custom"
        hideAnimations={false}
        uppercase={true}
        textEffect="normal"
        shimmerColor="#39FF14"
        shimmerSize="0.15em"
        shimmerDuration="3s"
        borderRadius="100px"
        background="rgba(0, 0, 0, 1)"
        placeholder="Generate with ScrollX UI"
       />

API Reference

interactive input

InteractiveInput is a customizable input component with animation, shimmer, and visual styling options.

Props

Property	Type	Default	Description
`variant`	"default" \| "outline" \| "ghost" \| "glow"	`"default"`	Visual style of the input.
`inputSize`	"sm" \| "default" \| "lg" \| "icon"	`"default"`	Adjusts the size of the input.
`rounded`	"none" \| "default" \| "full" \| "custom"	`"default"`	Border radius style.
`borderRadius`	string	`"—"`	Custom border radius (used when rounded is 'custom').
`glow`	boolean	`false`	Enables glowing animation around the input.
`textEffect`	"normal" \| "spread"	`"normal"`	Applies animated text styling.
`uppercase`	boolean	`false`	Transforms text to uppercase.
`background`	string	`"—"`	Sets background color or gradient.
`shimmerColor`	string	`"—"`	Shimmer color value (e.g., '#39FF14').
`shimmerSize`	string	`"—"`	Size or thickness of shimmer (e.g., '0.15em').
`shimmerDuration`	string	`"—"`	Duration of shimmer animation (e.g., '3s').
`asChild`	boolean	`false`	Renders input as a child using Slot.
`hideAnimations`	boolean	`false`	Disables all input animations.
`className`	string	`"undefined"`	Additional classes to style the input.
`...props`	HTMLInputElement attributes	`—`	Inherits all standard input element props.