shadcn.io is not affiliated with official shadcn/ui
Brand Directory Storefront Block for Radix UI
An A to Z brand directory: a band of three featured brands, a search that marks matches, a letter rail that scrolls a group into view and moves focus to it, and brands grouped by letter with two-letter plates and product counts.
Installation
Overview
Let shoppers browse a store by maker, with this brand directory for React with Radix UI. A header names the page and says what Hollin Mercantile is and how many makers it stocks. In a hairline frame with a plus mark on each corner, a band of three featured brands comes first, each with a two-letter plate, what it makes and its product count. Under it a search field marks the matched part of each name through Search Highlight Text, beside a count that reads like 14 of 41 brands. The stage is a fixed-height band: a rail of letters at the start (a strip above the list on a phone) and a scrolling list of brands under their letters. Pressing a letter scrolls its group to the top of the list and moves focus to its heading; a letter with no brand, or none left after the search, is dimmed and cannot be pressed. With no match the stage shows an Empty state in the same height. It's built from Input Group, Search Highlight Text, Button, Empty and Guides, with a CSS entrance only. For a multi-brand shop, a marketplace or a vendor index.
FAQ
How do I fill it with my own brands?
Edit BRANDS (an id, a name, a count of products) and FEATURED (a brand id and a line on what it makes). The groups are made from the first letter of each name, so keep them in any order; the plate is the first letters of the first two words, or the first two letters of a single word. The letters shown on the rail are A to Z; change LETTERS for another alphabet.
What do the letters do?
A letter looks for its group in the list, sets the list's scroll so the heading is at the top, and focuses the heading, so a screen reader reads where you landed. Letters with no brand are disabled, and they follow the search: type a name and only the letters that still have a match stay available.
How does the search work?
It keeps the brands whose name contains what you typed, ignoring case, and the match is marked in each name. The count says how many of the brands are shown. Escape or the Clear button empties the field and keeps focus in it. It is a plain substring match; for hundreds of brands do it on the server.
What stays local?
Everything: the brands are typed, and each link goes to #. The counts are samples; fill them from your catalog.
How does it look on a phone?
The featured brands stack, the letter rail becomes a strip you scroll sideways above the list, and the stage is shorter. The list scrolls inside the stage, never the page.
Is it accessible?
The letter rail is a navigation landmark with named buttons ("Jump to B"), the list is a focusable scroll region you can move with the arrow keys, each group has a heading, and the count is a polite live region present from the start. The plates are decorative: the brand's name is the link text.