Gradient Chat Input

Installation

Usage

import GradientChatInput from "@/components/ruixen/gradient-chat-input";
 
export default function App() {
  return <GradientChatInput onSend={(message) => console.log(message)} />;
}

Custom Reply

<GradientChatInput
  placeholder="Ask anything…"
  autoReply="On it — give me a sec ✨"
  autoReplyDelay={900}
  onSend={(message) => console.log(message)}
/>

Custom Spectrum

<GradientChatInput
  gradientColors={["#6EE7B7", "#3B82F6", "#9333EA", "#EC4899", "#F59E0B"]}
  onSend={(message) => console.log(message)}
/>

Disable Auto-Reply

Pass null to keep the field one-sided — bubbles still stream, but nothing replies.

<GradientChatInput
  autoReply={null}
  onSend={(message) => console.log(message)}
/>

Mute Sounds

Send and receive sounds are synthesized with the Web Audio API — no audio files to ship. Set sound={false} to silence them.

<GradientChatInput sound={false} onSend={(message) => console.log(message)} />

Props

Features

• Spectrum reveal: A blurred, multi-column gradient glides up and fades in the moment the first message is sent
• Synthesized sound: Subtle two-note send and receive chimes generated with the Web Audio API — zero audio assets, mutable via sound
• Spring bubbles: Messages pop in with motion spring physics — user replies right, responses left, each with a tucked corner
• Light & dark: Built entirely on shadcn CSS variables (background, primary, border) — themes out of the box
• shadcn primitives: Composed from the shadcn Button and Input for consistent focus rings and accessibility
• Active send state: lucide Plus and Send icons; the send button tints from muted to the theme primary the moment there's text to send
• Auto-reply: Configurable canned response with adjustable delay, or disable it entirely with null
• Rolling window: Only the latest maxVisible bubbles stay mounted, keeping the stack tidy
• Keyboard ready: Press Enter to send; the field clears and keeps focus for the next message, even when the send button is clicked