A centered hero built around a large prompt box: auto-growing textarea, Enter to send, a rotating placeholder, suggestion chips that type themselves in and a glow that pulses while the box is focused.
NewAtlas 2 is here
Tell Atlas what you need in plain words. It drafts the screens, wires up the data and hands you a live preview you can share.
npx shadcn@latest add https://hyperblur.dev/r/hero-prompt.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/hero-prompt.tsx.
import { HeroPrompt } from "@/components/hyperblur/hero-prompt"
<HeroPrompt onSubmit={(value) => console.log(value)} />| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | string | "Atlas 2 is here" | Announcement next to the New badge. Empty string hides the pill. |
| title | string | "Describe the app. Get it running in minutes." | Headline text. |
| highlight | string | "running" | Word or phrase inside title that gets the accent gradient. |
| subtitle | string | sample text | Supporting paragraph under the headline. |
| primaryCta | { label: string; href: string } | null | { label: "Start building free", href: "#" } | Solid pill button under the chips. Pass null to hide it. |
| secondaryCta | { label: string; href: string } | null | { label: "Browse 1,200 examples", href: "#" } | Outline pill button. Pass null to hide it. |
| placeholders | string[] | 4 example prompts | Placeholder lines that rotate every few seconds while the box is empty. |
| suggestions | { label: string; prompt: string }[] | 4 suggestions | Chips under the box. Clicking one types its prompt into the box. |
| value | string | Controlled text. Pair with onChange. | |
| defaultValue | string | "" | Initial text when uncontrolled. |
| onChange | (value: string) => void | Called on every change, including while a suggestion types itself in. | |
| onSubmit | (value: string) => void | Called with the trimmed text on Enter or the send button. Shift + Enter adds a new line. | |
| clearOnSubmit | boolean | true | Empty the box after sending. |
| maxLength | number | 2000 | Maximum characters, shown in the counter. |
| accent | string | "#2f7bff" | Glow, send button, caret and highlight color. |