Prompt Input React component for Tailwind CSS v4

Add to a project

Requirements: React 19 and Tailwind CSS v4, in Next.js (App Router or Pages), Vite or React Router. Installation guide · Next.js setup · Vite setup

Prompt Input is part of Pro, with 298 more Pro items: $8 a month or $150 once. 14-day refund before you download any Pro item. See plans

Usage

Import PromptInput from @/components/ui/prompt-input.

"use client"

import { useState } from "react"
import { Brain, Database, Globe, Sparkles, Gem } from "lucide-react"
import { PromptInput, type AiModel, type PromptInputMessage, type PromptInputStatus, type PromptTool } from "@/components/ui/prompt-input"

const MODELS: AiModel[] = [
  { id: "standard", name: "Acme Standard", group: "Acme AI", description: "Balanced, for everyday work", icon: <Sparkles />, recommended: true },
  { id: "pro", name: "Acme Pro", group: "Acme AI", description: "Deep reasoning for analysis and reports", icon: <Gem />, isNew: true },
]

const TOOLS: PromptTool[] = [
  { id: "web", label: "Web search", icon: <Globe /> },
  { id: "reasoning", label: "Extended thinking", icon: <Brain /> },
  { id: "crm", label: "CRM data", icon: <Database /> },
]

export function Composer({ ask, stop }: { ask: (message: PromptInputMessage) => Promise<void>; stop: () => void }) {
  const [status, setStatus] = useState<PromptInputStatus>("idle")

  async function send(message: PromptInputMessage) {
    setStatus("streaming")
    try {
      await ask(message)
    } finally {
      setStatus("idle")
    }
  }

  async function upload(file: File, { signal, onProgress }: { signal: AbortSignal; onProgress: (fraction: number) => void }) {
    const body = new FormData()
    body.append("file", file)
    onProgress(0.5)
    const response = await fetch("/api/files", { method: "POST", body, signal })
    if (!response.ok) throw new Error("Upload failed")
    return (await response.json()) as { url: string }
  }

  return (
    <PromptInput
      models={MODELS}
      tools={TOOLS}
      defaultActiveTools={["crm"]}
      voice
      status={status}
      onSubmit={send}
      onStop={stop}
      onUpload={upload}
      stopShortcut="escape"
      focusShortcut="shift+escape"
      labels={{ placeholder: "Ask the Acme assistant" }}
    />
  )
}

Props

• defaultValuedefault ""
  string

  Starting text while uncontrolled. Use value / onValueChange to control it; a rejected onSubmit restores the text through onValueChange.

• value
  string

  The text, controlled. Pair it with onValueChange.

• onValueChange
  (value: string) => void

  The new text on every change, dictation and restores included.

• onSubmit
  (message: PromptInputMessage) => (void | Promise<unknown>)

  Runs on Enter or the button when there is text or a ready attachment: { text (trimmed), attachments (ready or local), model, tools }. The composer clears at once and keeps focus; if the promise rejects, the text and files come back and an error is announced.

• statusdefault "idle"
  "idle" | "submitting" | "streaming"

  submitting: the button spins; streaming: it becomes Stop. Sending is blocked while not idle, typing is not.

• onStop
  () => void

  The Stop button and stopShortcut while status is streaming.

• placeholderdefault "Ask anything"
  string

  Also the textarea's accessible name unless aria-labelledby is passed.

• variantdefault "elevated"
  "elevated" | "outline" | "soft"

  elevated: a floating white panel with a soft shadow (ChatGPT); outline: a bordered field; soft: the filled well of the form fields.

• sizedefault "md"
  "sm" | "md" | "lg"

  Text 14 / 15 / 16px (16px on phones always, so iOS never zooms), toolbar buttons 28 / 32 / 36px, padding 8 / 10 / 12px.

• radiusdefault "lg"
  "md" | "lg" | "full"

  md 16px, lg 24px; full is a 28px pill while the text is one line and 24px once it grows or holds attachments.

• tonedefault "neutral"
  "neutral" | "brand" | "success" | "warning" | "danger" | "info"

  The send button, active tool chips and the focus ring's tint. Brand orange is opt-in.

• colordefault ""
  string

  Any CSS color; replaces the tone. Text on the send button turns black or white by lightness.

• minRowsdefault 1
  number

  Height of the empty text area in rows.

• maxRowsdefault 8
  number

  Grows with the text up to this many rows, then scrolls (native field-sizing, no JS per keystroke).

• positiondefault "static"
  "static" | "sticky" | "fixed"

  fixed: pinned to the viewport bottom, lifted above the on-screen keyboard without re-rendering, safe-area padded, and writes its height as --prompt-input-offset on <html> so the page can pad its content; sticky: the bottom of its scroll parent (inside a chat thread). Both center the box in a 768px reading column over a fade.

• safeAreadefault true
  boolean

  Pads the bottom by the home-indicator inset (at least 12px) when fixed or sticky.

• submitShortcutdefault "enter"
  "enter" | "mod+enter"

  enter: Enter sends and Shift+Enter makes a new line on fine pointers (touch keyboards always insert a new line); mod+enter: Enter is a new line and Cmd/Ctrl+Enter sends. Cmd/Ctrl+Enter always sends.

• maxLengthdefault 0
  number

  A soft character limit: the counter appears near it and turns red past it, and sending is blocked until the text is shorter. 0 = none.

• tokenLimitdefault 0
  number

  Estimated tokens (estimateTokens): the hint reads "1,2 K / 8 K tokens" near the limit. 0 = none.

• showCountdefault "auto"
  "auto" | "always" | "never"

  auto: the hint appears past 80% of maxLength / tokenLimit (warning), and turns danger past 100%; always: always shown (the token estimate without a limit); never: hidden, the limit still blocks.

• allowAttachmentsdefault true
  boolean

  The + button, drop and paste of files.

• acceptdefault "image/*,application/pdf,.doc,.docx,.xls,.xlsx,.csv,.txt,.md,.json"
  string

  Allowed types, like the input's accept attribute; checked by mime type and by extension. Defaults to DEFAULT_PROMPT_INPUT_ACCEPT.

• maxFilesdefault 10
  number

  At most this many attachments; extra files are rejected with one message.

• maxFileSizedefault 20971520
  number

  Bytes per file (20 MB).

• cameradefault true
  boolean

  A "Take a photo" entry (capture="environment") in the + menu on touch devices.

• voicedefault false
  boolean

  A dictation button (VoiceInput). Its transcript goes in at the caret, replacing a selection; while recording the voice pill takes the toolbar.

• focusShortcutdefault ""
  string

  Focuses the box from anywhere and puts the caret at the end, e.g. "shift+escape". Empty binds nothing.

• stopShortcutdefault ""
  string

  Stops a streaming reply, e.g. "escape". A bare key works while focus is in the composer (so a page dialog keeps its Escape), a combo like "mod+shift+x" works anywhere; an open menu or model list closes first. Empty binds nothing.

• autoFocusdefault false
  boolean

  Focuses the box on mount on desktops only; a phone keyboard never pops up by surprise.

• disableddefault false
  boolean

  Dims and blocks the box and every toolbar control.

• namedefault ""
  string

  The textarea's name for forms.

• localedefault ""
  string

  Number formatting of sizes, percentages and token counts (12.5K in en-US). Empty uses the UIProvider locale, then the browser's.

• attachments
  ChatAttachment[]

  Controlled attachments ({ id, name, type, size, url, previewUrl, status, progress, error }). Pair it with onAttachmentsChange.

• defaultAttachmentsdefault "[]"
  ChatAttachment[]

  Starting attachments while uncontrolled (a restored draft).

• onAttachmentsChange
  (attachments: ChatAttachment[]) => void

  Every add, progress step, finish, failure and removal.

• onUpload
  (file: File, { signal, onProgress }) => Promise<unknown>

  Uploads each added file with progress (0..1, one render per 100ms at most); resolve with a url string or { url } to set attachment.url. Removing a file aborts through the signal, Retry runs it again. Without it attachments stay local, with object-URL previews revoked on removal and unmount.

• onRetry
  (attachment: ChatAttachment) => void

  Retry on a failed attachment the composer holds no File for (restored from a draft or added by the app).

• models
  AiModel[]

  Shows a ModelPicker (ghost, opening upward; a bottom sheet on phones) in the toolbar.

• model
  string

  The chosen model id, controlled. Uncontrolled it starts at defaultModel, else the first recommended model.

• defaultModeldefault ""
  string

  Starting model id while uncontrolled. Empty starts at the first recommended model (Acme Standard in the demo).

• onModelChange
  (model: string) => void

  A model was picked.

• tools
  PromptTool[]

  Toggle chips in the toolbar ({ id, label, icon, description, disabled }); in a composer narrower than 512px they move into the + menu (a sheet on phones) as checkbox rows and only active ones stay in the toolbar; under 672px the chips show as round icons with the name in a tooltip.

• activeTools
  string[]

  Active tool ids, controlled.

• defaultActiveToolsdefault "[]"
  string[]

  Active tool ids while uncontrolled.

• onActiveToolsChange
  (tools: string[]) => void

  A tool was switched on or off (ids in the order of tools).

• onVoice
  (result: VoiceInputResult) => (void | Promise<unknown>)

  Makes the mic send audio messages (the blob and transcript) instead of dictating into the box.

• onEditLast
  () => void

  ArrowUp in an empty box with the caret at the start: edit the last message.

• toolbarStart
  ReactNode

  Extra controls after the model picker (a project picker).

• toolbarEnd
  ReactNode

  Extra controls before the mic (a usage ring).

• labels
  Partial<PromptInputLabels>

  Every string: placeholder, send, stop, attach, upload, photo, tools, cancel, attachments, remove(name), retry, uploading(name, percent), progress(percent), uploadFailed, drop, tooMany(max), tooLarge(name, max), typeNotAllowed(name), tokens(used, limit), tokenCount(used), characters(count, max), overLimit, newlineHint, attached(name), removed(name), sendFailed.

• modelPickerProps
  Partial<ModelPickerProps>

  Passed to the model picker: labels, shortcut, groupBy, showSpeed.

• voiceInputProps
  Partial<VoiceInputProps>

  Passed to the voice button: labels, lang, maxDuration, mode.

• classNames
  Partial<Record<"box" | "textarea" | "attachments" | "attachment" | "toolbar" | "submit" | "hint" | "drop", string>>

  Extra classes for the inner parts.

• className
  string

  Extra classes for the root, merged last. Other props (id, aria-*, data-*) go there too.

Parts

FAQ

Used in

More React AI components