Typewriter Search Hero React component
A search-first hero whose box types out example searches by itself, then hands over to real search with live suggestions, highlighted matches and full keyboard support.
About the Typewriter Search Hero component
Typewriter Search Hero makes search the whole first screen. The box types out example searches by itself, which shows people what they can ask for, and stops the moment they click into it.
From there it is a real search box: suggestions filter word by word as you type, matches are picked out in bold, and the arrow keys, Enter and Escape all work. The list opens over the page, so nothing moves underneath it.
When to use it
Use it on marketplaces, directories, help centres, job boards and travel sites, where the next step is always a search.
If people need a pitch before they would search, lead with a regular hero and put search further down.
Installation
Add the Typewriter Search Hero component to your project with the shadcn CLI. It lands in components/typewriter-search-hero.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/typewriter-search-heroOr copy the source by hand and install its dependencies:
npm install clsx tailwind-mergeProps
<TypewriterSearchHero /> accepts 13 props, all optional. It also accepts the usual <section> attributes, like className, style, id and aria-*, and passes them to its root element.
| Prop | Type | Default |
|---|---|---|
| theme | "dark" | "light" | "dark" |
| eyebrow | string | "Homes worth the trip" |
| title | string | "Tell us where you'd rather be" |
| description | string | "Describe it the way you would to a friend. We'll find the place." |
| phrases Phrases the search box types out, one after another. | string[] | DEFAULT_PHRASES |
| prefix Word typed before each phrase, e.g. "Find". | string | "Find" |
| suggestions Matches shown under the box as people type. | { title: string; meta?: string; href?: string }[] | DEFAULT_SUGGESTIONS |
| chips Quick searches under the box. | string[] | DEFAULT_CHIPS |
| stats Small facts along the bottom. | { value: string; label: string }[] | DEFAULT_STATS |
| speed Milliseconds per typed letter. | number | 46 |
| minHeight Height from tablet width up, in px. | number | 720 |
| onSearch | (query: string) => void | — |
- theme"dark" | "light"Default: "dark"
- eyebrowstringDefault: "Homes worth the trip"
- titlestringDefault: "Tell us where you'd rather be"
- descriptionstringDefault: "Describe it the way you would to a friend. We'll find the place."
- phrases
Phrases the search box types out, one after another.
string[]Default: DEFAULT_PHRASES - prefix
Word typed before each phrase, e.g. "Find".
stringDefault: "Find" - suggestions
Matches shown under the box as people type.
{ title: string; meta?: string; href?: string }[]Default: DEFAULT_SUGGESTIONS - chips
Quick searches under the box.
string[]Default: DEFAULT_CHIPS - stats
Small facts along the bottom.
{ value: string; label: string }[]Default: DEFAULT_STATS - speed
Milliseconds per typed letter.
numberDefault: 46 - minHeight
Height from tablet width up, in px.
numberDefault: 720 - onSearch(query: string) => void
Show all 13 propsShow fewer
| onSelect | (suggestion: SearchSuggestion) => void | — |
- onSelect(suggestion: SearchSuggestion) => void
Collections
Use-case pages that compare Typewriter Search Hero with the other components that do a similar job.
npm dependencies
Installed for you by the shadcn CLI.
Typewriter Search Hero FAQ
- Where do the results come from?
- You pass suggestions as a prop and the hero filters them. For server-side search, update suggestions as onSearch or your own state changes.
- What do onSearch and onSelect do?
- onSearch fires when someone presses Enter or the button with their own text. onSelect fires when they pick a suggestion.
- Is it accessible?
- Yes. The field is a combobox with a listbox, the active option is announced, and the typing placeholder is hidden from screen readers.
- Can I change the typing speed?
- Yes, with speed, in milliseconds per letter. The default is 46.
