Prompt Hero
A hero built around a prompt box on a fluid gradient: the page colour flows into deep blue with drifting light, while example prompts type themselves out.
Installation
Full Setup guideInstall the component automatically via Shadcn CLI.
npx shadcn@latest add https://www.grettech.com/api/registry/prompt-heroProps
| Prop | Type | Default | Description |
|---|---|---|---|
title* | React.ReactNode | - | The main headline. |
eyebrow | string | - | Small label above the title. |
description | string | - | Supporting text under the title. |
placeholders | string[] | [] | Example prompts typed out in the empty box, one after another. |
suggestions | string[] | [] | Chips under the box; clicking one fills it in. |
onSubmit | (prompt: string) => void | Promise<void> | - | Called with the prompt. A returned promise shows a loading state; the box clears when it resolves. |
inputLabel | string | "Describe what you want to make" | Accessible name for the box. |
note | React.ReactNode | - | Small print under the box. |
glowColors | [string, string] | ["#8b5cf6", "#22d3ee"] | Two colours for the border glow and the light behind it. |
fluidColors | [string, string, string] | ["#8cc4ff", "#1a70ea", "#0a47c8"] | Light, middle and deep colours of the fluid gradient. |
className | string | - | Extra classes for the section. |