Heroes

PromptHero

We replaced the value prop with a text input.

The ChatGPT-box-as-CTA. Pair with a Rotator above and you have an entire homepage in five components.

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-hero.json

Default

<PromptHero onSubmit={(text) => navigate(`/build?q=${text}`)} />

Custom CTA + placeholder

<PromptHero
  placeholder="Paste a tweet, get a landing page…"
  ctaLabel="Ship it"
/>

Prop	Type	Default	Description
placeholder	string	"Describe what you want to build…"	Input placeholder.
value	string	-	Controlled value.
defaultValue	string	-	Uncontrolled initial value.
onChange	(value: string) => void	-	Fired on every keystroke.
onSubmit	(value: string) => void	-	Fired on form submit.
leading	Snippet \| false	Sparkle snippet	Leading icon.
ctaLabel	Snippet	"Generate"	Submit button label.
hideCta	boolean	-	Render input-only.