Interactive input

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

Installation

npx shadcn@latest add @scrollxui/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-solid" \| "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.