shadcn.io is not affiliated with official shadcn/ui
Centered Search with Product Card Grid Hero Block for Solid
A centered showcase hero for a marketplace: a search form with the Shine Button and category pills that really filter a shelf of eight product cards in hairline cells.
Installation
Overview
A centered marketplace hero, for Solid with Ark UI, shown here for Stencil, a store of templates, plugins, icon sets and themes. A bold two-line headline and a promise sit over a search form, a field with the filled Shine Button beside it, and a row of category pills. Below them a band, ruled across the page column with + marks on its corners, holds the shelf: eight product cards in cells that share their hairlines, each a link with a small greyscale preview of what it sells (a page wireframe, a grid of glyphs, a plugin's switches, a theme's swatches), a name, a price and a kind badge. The search and the pills really filter the shelf, and a count above it says how many items match. On a phone the shelf is four cards. It's built from Input Group, Segment Group, Aspect Ratio, Badge, Empty, Guides and Shine Button, with Lucide icons and Tailwind CSS, and a CSS entrance that stays still under reduced motion. For template marketplaces, asset stores, plugin directories and any storefront whose visitors come to browse.
FAQ
How do the search and the category pills filter the cards?
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.
How do I connect the search to my real catalog?
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=….
Why does the shelf keep eight places when fewer items match?
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.
Is this marketplace hero accessible?
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.
How do I replace the previews with product shots?
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.
How does it fit on a phone?
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.