Does Hero Search work with Next.js?

Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.

Can I change the copy and colours?

Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Hero Search

Marketplace hero built around one big search box with typed example queries and category chips.

Type: Hero section
Styles: Light, Minimal
Licence: Charcoal UI Pro

About Hero Search

Hero Search puts a single search box at the centre of the page, with example queries typing themselves into the placeholder, a location badge, category chips and a live result line when someone searches. It tells visitors exactly what to do in one glance.

It is a full-width hero section for React and Tailwind CSS 4, in a light and minimal style. Preview it at any width above, then install it with one command.

When to use Hero Search

Service and freelancer marketplaces.
Real estate and rentals.
Help centres and knowledge bases.
Directories, job boards and tutor finders.

How it is built

The placeholder uses Typewriter and stops as soon as the field is focused, chips fill the query, and the prefix, noun, counts and background photo are props so the same hero serves very different marketplaces.

It is composed from Button, Typewriter, so installing it also installs those components, and you can restyle each one the same way you would on its own.

Goes well with Hero Search

Hero Search is part of 7 full templates, so you can see it in a finished page.

Vellum template: Find anything your team ever wrote.
Glyph template: Four thousand icons, one style.
Fixwell template: Book a pro in two minutes.
Keyhaven template: Homes, neighbourhoods and the people who know them.
Carebridge template: See a doctor today, from your sofa.
Archive template: A library people can search.
Tutorly template: The right tutor, this week.
Hero Ember: A dark React hero section with drifting embers, an announcement pill and two CTAs
Hero Split: A split React hero: copy on the left, a live product window with stats and a chart
Hero Rotating: A React hero with a rotating headline word, email capture and avatar proof
Hero Terminal: A developer React hero with light beams on a grid and a typing terminal
Button: An animated React button with six variants, spring press feedback and a width-stable loading state
Typewriter: A React typewriter effect with a human rhythm that types, holds and deletes words

Install Hero Search

npx shadcn@latest add @charcoal/hero-search

Hero Search is part of Charcoal UI Pro: one seat covers all 107 sections, 100 templates and 300 Pro components, for unlimited projects. The command installs the section into components/sections along with every component it uses.

Frequently asked questions

Does Hero Search work with Next.js?: Yes. It is a React 19 component styled with Tailwind CSS 4, so it drops into a Next.js page, a Vite app, Remix or Astro.
Can I change the copy and colours?: Yes. The section is a file in your project. Text, links and images are plain props or JSX, and colours come from your theme's CSS variables, so a brand change is a token edit.

Built from

Button: Six variants with spring press feedback. The loading state swaps the label for a spinner without changing width.
Typewriter: Types each word with a human rhythm, holds it, deletes it and moves on. Screen readers hear the full list once.

Hero Search as Markdown