Prompt Input

A layered composer: a card with the field, a '+' button that opens the file picker and the first attached file inside the card with an underlined '+N more' that opens a modal listing all files, think / research / web-search toggles, a mic that pulses while listening, and a square send button, and a Connect your stack tray below that swaps to a shimmering thinking line while it syncs.

pnpm dlx shadcn@latest add @ditherui/prompt-input

Install

$ pnpm dlx shadcn@latest add @ditherui/prompt-input

Props

PropTypeDefault

className / ...div propsReact.ComponentProps<"div">—

valuestring—

defaultValuestring""

onValueChange(value: string) => void—

placeholderstring"Start by typing…"

onSend(text: string, files: File[]) => void—

When to use the prompt input

Use it as the composer for an AI chat. Variants include a layered composer with attachments and toggles, a card-style composer with a Private mode, and a generation-focused prompt bar.

Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.

Suggested components

TSformat-price.ts+1-1

export function formatPrice(cents: number) {
  return `$${(cents / 100).toFixed(2)}`
  return fmt.format(cents / 100)
}

Inline DiffInline additions and removals so users can review what an agent changed.