Wensity

Liquid Multimodal Input

An expanding prompt area with a glowing drop zone that breathes open to meet you as you type a thought or drag a file.

agentic ai interfacesliquidmultimodalinputframer motiontabler icons react
Liquid Multimodal Input component preview

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add liquid-multimodal-input

Usage

Import LiquidMultimodalInput from @/components/wensity/liquid-multimodal-input and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
"use client";
import { LiquidMultimodalInput } from "@/components/wensity/liquid-multimodal-input";


export function LiquidMultimodalInputDemo() {
  return (
    <LiquidMultimodalInput
      placeholder="Ask anything, or drop a file…"
      maxHeight={250}
      defaultModel="fast"
      onSubmit={(value, files, model) => {
        console.log("Submitted:", { value, files, model });
      }}
    />
  );
}

Props

PropTypeDefaultDescription
placeholderstring"Ask anything, or drop files…"Placeholder text shown when the input is empty.
maxHeightnumber250Maximum height in pixels before the textarea scrolls.
acceptstring"image/*,application/pdf,text/*"Accepted file MIME types for the drop zone and file picker.
defaultModel"fast" | "thinking" | "pro""pro"Initial selected model when uncontrolled.
onSubmit(value: string, files: File[], model: LiquidModel) => void-Fired when the user submits via Enter (without Shift) or the send button.
onChange(value: string) => void-Fired on every text change.
onModelChange(model: LiquidModel) => void-Fired when the selected model changes.
hideModelbooleanfalseHide the built-in model selector when the host app owns model state.