shadcn.io is not affiliated with official shadcn/ui
Split Search Bar Hero Block for React Aria
A split hero whose call to action is a large search field with a Shine Button, popular searches, and, across a solid divider, a results panel that filters as you type.
Installation
Overview
A split hero for React with React Aria, here for the Fathom docs. The start column has an announcement link, a headline, a sentence, a search form (an InputGroup with a labelled InputGroupInput and a search icon, and a ShineButton that submits) and popular searches that fill the field in one click. Across a solid divider with a + mark where it meets the top rule, a results panel in a hairline frame lists the best five of eight articles as links and filters live as you type, with a message when nothing matches and a footer of three counts. The form is a search landmark and the result count is a polite status. Below lg the panel follows the text with three results. Made for documentation sites, help centers and knowledge bases.
FAQ
How do I send the search to my results page?
The quickest way needs no code: give the form an action="/search" and remove the preventDefault from the submit handler. The browser then goes to /search?q=…, since the field is named q, and it works before any script loads. To stay in a client-side router, keep preventDefault and navigate in submit with the field's trimmed value instead.
In React, call your router's navigate function there, such as router.push(`/search?q=${encodeURIComponent(query.trim())}`) in Next.js or navigate(…) in React Router.
An empty search doesn't submit: the field just takes focus again.
How does the results panel work?
It is a preview, not a search engine: the ARTICLES array holds each title, its section and extra keywords, and the panel keeps the articles in which every word typed appears in the title or the keywords, up to five. Replace the array with your top pages, or feed it from your search API. The rows have a fixed height and the list a fixed number of rows, so filtering never moves the page.
How do the popular searches work?
They are the SUGGESTIONS array: each is a small outline button that puts its words in the field and moves focus there, so the panel filters at once and the visitor can press Enter or keep typing. Keep to five to eight short terms.
Is it accessible for keyboard and screen reader users?
The form sits in a search element and the field has an accessible name, “Search the docs”. The result count is a polite status, so a screen reader hears “3 results” as you type, and the results are a list of links with a visible focus ring. The empty state is text in the same box.