Primitives

Prompt

The textarea every AI builder ships instead of explaining what their product does.

The multi-line prompt box used by every AI builder. Multi-line textarea on top, toolbar on the bottom: a `+` for adding context, a model dropdown, a microphone for voice mode, and a gradient send button. Cmd/Ctrl+Enter submits.

Install

Copy this owned-code component into your app from the registry.

pnpm dlx shadcn-svelte@latest add https://benjamin-brady.github.io/performative-ui-svelte/registry/prompt.json

Examples

Default

<Prompt
  onSubmit={(text, { model }) => generate(text, model)}
/>

Custom models + voice/context wired up

<Prompt
  placeholder="Paste a tweet, get a landing page…"
  models={["o4-mini", "Claude Sonnet 4.6", "Llama 4 70B"]}
  defaultModel="Claude Sonnet 4.6"
  onAddContext={openFilePicker}
  onVoice={startVoiceMode}
  onSubmit={(text) => generate(text)}
/>

Props

Prop	Type	Default	Description
value	string	-	Controlled text value.
defaultValue	string	-	Uncontrolled initial text.
onChange	(value: string) => void	-	Fires on every keystroke.
onSubmit	(value, ctx: {model}) => void	-	Fires on submit (button or Cmd/Ctrl+Enter).
placeholder	string	"Build me a…"	Textarea placeholder.
rows	number	3	Initial textarea height in rows.
models	string[]	-	Model options for the dropdown.
model	string	-	Controlled selected model.
defaultModel	string	-	Uncontrolled initial model.
onModelChange	(model: string) => void	-	Fires when the user picks a model.
onAddContext	() => void	-	Fires when the + button is clicked.
onVoice	() => void	-	Fires when the mic button is clicked.
hideAddContext	boolean	-	Hide the + button.
hideModel	boolean	-	Hide the model dropdown.
hideVoice	boolean	-	Hide the mic button.
hideSend	boolean	-	Hide the send button.
submitOnCmdEnter	boolean	true	Submit when Cmd/Ctrl+Enter is pressed.
toolbarExtras	Snippet	-	Extra node rendered just before the mic + send buttons (e.g. a Cmd+↵ hint).

Next AsciiHero ] →