Centered Search with Product Card Grid Hero Block for React

Both feed one pure function, matches, that keeps the products in the chosen category whose name or kind contains the search. A pill applies as soon as it's chosen; the search applies when the visitor presses Enter or Search, and emptying the field clears it. The shelf shows the first eight matches in the order of the PRODUCTS array, best sellers first, and the count above it ("16 items", "1 plugin for “auth”") is worked out from the same results, so the two never disagree.

For a client-side catalog, replace PRODUCTS with your own items: each has a kind, a name and a price, and a new kind needs a line in TAGS, in CATEGORIES and a preview component. To send the visitor to your search page instead, drop the onSubmit handler and give the form action="/search": the field is already named q, so the browser submits /search?q=….

So that filtering never moves the page. The grid always has eight cells; a cell without a match keeps its size and its place in the hairline grid, but its link is invisible, which also takes it out of the accessibility tree and the tab order. When nothing matches at all, an Empty state covers the shelf with what was searched and a Clear search button that resets the field.

Yes. The form sits in a search landmark and its field has an accessible name, since the placeholder isn't one. The pills are a SegmentGroup, a radio group named "Category": arrow keys move between them, and the chosen one is announced as checked. The count above the shelf is a polite live region, so a screen reader hears the new count after a search or a filter, and never on load. Each card is a single link whose name comes from its heading, price and badge; its preview is decorative and hidden from assistive technology.

Each card's image is an AspectRatio at 4:3 holding a small preview component for the kind. Put an img with className="size-full object-cover" in the AspectRatio instead, and give it an empty alt: the product's name is already the heading inside the same link, so a screen reader would only hear it twice. A 4:3 crop of a template's first screen reads well at this size.

The headline drops its forced line break and wraps, balanced, at text-4xl. The search field and the Shine Button share a row, the pills wrap onto centered rows, and the shelf is a two-by-two grid of the first four places that becomes two rows of four from the md breakpoint. Long product names end in an ellipsis on one line, so every card keeps the same height whatever the filter.