Home / AI Era Interfaces / Prompt Box Hero
Prompt Box Hero CSS Template, Free with Live Demo
Free prompt box hero template where a big input is the main hero. Rotating example prompts, suggestion chips and a word count. Live demo and HTML download. The example is Buildwell, an AI website builder.
What is prompt box hero?
A prompt box hero replaces the usual big picture with the product itself: a large text box that invites you to type. Lovable, v0 and many AI builders open this way, because trying it is the best pitch.
The placeholder changes every few seconds to show ideas, the chips fill the box in one tap, and the main button only turns on once there is something to send.
Good for
- AI builders and generators
- Search products
- Writing and design tools
- Any product people should try right away
What you get in this template
- Large prompt box with a focus glow
- Placeholder that rotates through example ideas
- Suggestion chips that fill the box
- Button disabled until there is text
- Built this week gallery below
The key CSS
This is the part that makes the prompt box hero look work. Copy it into your own project.
.pb {
background: #fff;
border: 1px solid #e3ddd2;
border-radius: 22px;
padding: 14px;
}
.pb:focus-within {
border-color: #2a6df4;
box-shadow: 0 0 0 4px rgba(42, 109, 244, .15);
}
textarea { width: 100%; border: 0; resize: none; min-height: 90px; font-size: 1.15rem; }How to use it
- Click Download HTML file above.
- Open the file in any code editor, like VS Code.
- Change the text, colors and links to match your project. Colors are at the top of the style tag.
- Upload it to any host, such as GitHub Pages, Netlify or your own server. It is one file with no build step.
Questions people ask
What is a prompt box hero?
It is a hero section where the main element is a text input for an AI prompt, so visitors can use the product right away instead of reading about it.
How do I highlight the whole box when the textarea is focused?
Use :focus-within on the wrapper. It applies when any element inside it has focus.
Does the rotating placeholder hurt accessibility?
The box has a proper label, and the rotation stops for people who prefer reduced motion.
More AI Era Interfaces designs
031. Chat UI
Wayfarer, an AI travel assistant
032. AI Dashboard
Signalboard, an AI customer support dashboard
033. AI Glow Gradient
Quill, an AI writing assistant
035. Node Workflow Canvas
Relay, an automation builder
036. Streaming Text
Recap, an AI meeting notes tool
037. Terminal Developer
shipit, a command line deploy tool
038. Linear Style Minimal
Tracklet, an issue tracker
039. Spotlight Cards
Lumen, an API platform