Search
Search components and blocks
Prompt Input
Open pageA 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.
Install
Props
className / ...div propsReact.ComponentProps<"div">—valuestring—defaultValuestring""onValueChange(value: string) => void—placeholderstring"Start by typing…"onSend(text: string, files: File[]) => void—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.
Props
Caretwhile 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 modea toggleable pill — turns violet when active, the ghost icon blur-pops, and the whole card gets a matching violet ring; no explanatory copy needed—Attachthe '+' 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">—A generation-focused prompt bar — mode, quality, and aspect-ratio pills each open a small dropdown that grows from its own corner, a two-line model picker shows a checkmark on the current selection, and the send button swaps to a stop icon while 'generating'.
Props
Mode / Quality / Ratio pillseach opens a small corner-grow dropdown (Image/Video, 4K/2K/1080p, 16:9/1:1/9:16/4:3); the chevron flips 180° while open—Model pilltwo-line dropdown (name + hint) with a checkmark on the selected model, same corner-grow motion—Attachopens the native file picker—Send / stopanimated icon swap between the two states; simulates a brief generating run—valuestring—defaultValuestring""onValueChange(value: string) => void—modelstring—defaultModelstringsecond modelonModelChange(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.