Prompt Composer

Pro

A card-style AI chat composer — a Private mode toggle tints the card violet (no explanatory text, the color says it), an empty focused field blinks a caret that cycles through four brand colors, a '+' button opens an Add context menu (files, screenshot, repo, database) that drops a removable chip in above the field, a toggleable Research pill, and a model dropdown that grows open from the trigger's corner (width and height together, no blur) rather than just fading in, a mic that 'records' with a pulsing ring and then appends a transcript, and an animated send/stop button.

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

Props

PropTypeDefault

Caret

while empty and focused, a fake caret blinks and cycles through four brand colors each time it blinks on (Google AI search-style); reverts to the native caret once you start typing

—

Private mode

a toggleable pill — turns violet when active, the ghost icon blur-pops, and the whole card gets a matching violet ring; no explanatory copy needed

—

Attach

the '+' button opens an Add context menu (Upload files, Add screenshot, Connect repo, Query database); each choice files a removable chip in above the field

—

Researcha toggleable pill — turns sky blue when active, and the telescope icon blur-pops and tilts on every toggle—

Model menudropdown that grows in from the trigger's corner (width and height scale up together, no blur) instead of a plain fade—

Mictap to 'record' — a pulsing ring plays for ~1.8s, then a transcript is appended to the field—

Send / stopanimated icon swap between the two states; simulates a brief streaming reply—

valuestring—

defaultValuestring""

onValueChange(value: string) => void—

modelstring—

defaultModelstring"Opus 4.8"

onModelChange(model: string) => void—

onSend(text: string) => void—

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

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.