shadcn.io is not affiliated with official shadcn/ui
A to Z Partner Wall Gallery Block for Ark UI
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 Ark 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 keep their physical directions in Ark's toggle group.