Search Bar

What it does

A search bar is the box visitors type into when they'd rather ask than browse. This one can show a placeholder sentence, the gray example text sitting inside the empty field so people see what kind of request to type, or no placeholder at all.

Grab the prompt (the ready-made instructions under the demo) and your AI rebuilds the bar inside your project, in your colors.

• Three places to put it: a hero with a heading, a header bar, or a panel that slides up from the bottom on phones.
• Autocomplete, meaning suggestions that appear under the field while you type, is optional.
• Popular searches and recent searches can show under the field too.
• Results open on their own page or filter the list right there, live. It's up to you.

How it works

1. 01

   Tick where the bar lives, a hero, a header bar, a bottom panel on phones, or any mix.

2. 02

   Type your own placeholder sentence, or leave it empty.

3. 03

   Pick the button style, text only or text with a search icon, in your site's own action color.

4. 04

   Choose what a search does, open a results page or filter the list on the page live.

5. 05

   Turn suggestions on if you want them, autocomplete alone or with your popular searches.

6. 06

   Decide if recent searches show under the field.

7. 07

   Copy the prompt with the button under the demo.

8. 08

   Paste it into Gemini, Grok or any other AI you use.

9. 09

   Answer its questions. It will ask you which pages the search covers and where your results page lives.

10. 10

    Type a few real searches on your phone before you ship it.

What you can customize

• Placement: tick any mix of hero, header bar and bottom panel on phones. In a hero it sits right under the headline of the hero section design.
• Placeholder: the example sentence in the empty field. Leave it empty and the field stays empty.
• Button style: text only, or text with a search icon, always in your site's main action color.
• Results: a results page, or the list on the page filtering itself as people type. Live filtering suits a long FAQ accordion or a product list.
• Suggestions: off, autocomplete from your own content, or autocomplete plus your most popular searches.
• Recent searches: the visitor's last 5 searches under the field, on or off.
• Colors, fonts and corners always come from your own site, so it looks like it was there all along.