shadcn.io is not affiliated with official shadcn/ui
A to Z Partner Wall Gallery Block for React
A rail of letters over a wall of twenty-four drawn partner marks on shared hairlines, where choosing a letter shows only that letter's partners, with a live count, in place and without moving anything.
Installation
Overview
A partner index for React with Base UI, for Lanternbook, a directory of the shops and workshops a small studio works with. A start-aligned header sits over a band with a rail of letters (All, then A to Z, the letters no partner starts with switched off) and a line that says what is shown, and under it a wall of twenty-four drawn marks on shared hairlines that run from rail to rail and end the block: eight across in three rows, four across on a tablet and three on a phone. Choosing a letter shows only the partners that start with it and writes "3 of 24 partners under M": every mark stays in its own cell and the others become a quiet dot, so nothing on the page moves. The marks are drawn glyphs beside each name, not logos. It's built from ToggleGroup and Guides. The directory and the partners are made up for the example.
FAQ
How do I use real partners and logos?
Edit PARTNERS: each has an id, a name and the capital letter it starts with, in A to Z order. Replace the Glyph in a cell with your logo (an <img alt="" …> or an inline SVG; the name beside it is the accessible label). The rail and the count are worked out from the list, so a letter nobody starts with switches itself off.
Why do the marks stay where they are?
A filter that re-lays a wall moves everything below it and loses your place. Here each cell keeps its mark and its place in the grid; a cell that does not match hides its content and shows a small dot. The wall is as tall with M chosen as with All, and the line under the rail says what is shown.
How does it work with a keyboard?
The rail is one stop in the tab order. Inside it the arrow keys move between letters, skipping the switched-off ones, and Space or Enter chooses one; Home and End go to the ends. The count line is a polite live region, so a screen reader hears "3 of 24 partners under M" when you choose. In a right-to-left layout the arrow keys follow the reading direction.
Related
- Pro
Client Marks Gallery
Hairline gridsTwelve drawn monogram marks on shared hairlines for a brand studio, where each mark opens a viewer dialog with the project that client commissioned, its brief and result, Previous and Next client, a counter, arrow keys and focus that returns to the mark.
- Pro
A wall of eighteen customer wordmarks for a month-end close tool, under a compact header with the customer count, in cells that share their hairlines from rail to rail.
- Pro
Category Grid Tab-Filtered Logos
Tabs and filtersFour pill tabs (All, Growers, Co-ops, Advisers) over a wall of eight customer wordmarks in shared hairline cells, for a farm planning tool.
- Pro
Filterable Gallery
Filter, sort and tabsTwelve drawn pictures on shared hairlines with a band of chips, each with a count, that keeps only one kind of work and says how many are showing.
- Pro
Press Clippings Gallery
Walls and tablesEight drawn newspaper cuttings on a bakery's wall, each a degree off true, with a rail by kind that lights some and dims the rest, and a reader dialog with the paper, the headline, the fixed date, a few lines and a link.
- Pro
Categorized FAQ
Topics and filtersA topic-tabbed FAQ for a bookkeeping app: a compact header, a band of line tabs with a count on each, and one accordion per topic.