shadcn.io is not affiliated with official shadcn/ui
Client Marks Gallery Block for Ark UI
Twelve 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.
Installation
Overview
A client wall for React with Ark UI, for Fablemoor, a brand studio. A compact header sits over twelve drawn monogram marks on shared hairlines that run from rail to rail and end the block: six across in two rows, three across on a phone, each a letter in one of six shapes, filled or outlined, with the client's name under it. Every mark is a button that opens one viewer dialog: the project that client commissioned, drawn whole at its own ratio (a poster, an app screen or a shopfront), its title, the trade and the year, the brief in a sentence and the result in a line, with Previous client and Next client, a "3 of 12" counter, the arrow keys (Home and End too), a swipe on touch screens and Escape. Closing returns focus to the mark of the client last shown. On a phone the viewer fills the screen. The marks and pictures are drawn, not logos or photographs, in your theme's own greys. It's built from Dialog, Button and Guides. The studio, clients, briefs and results are made up for the example.
FAQ
How do I use my clients' real logos?
Each client in CLIENTS has a name, letters, project, trade, year, brief, result and a scene. Swap the Mark in the grid cell for your logo (an <img alt="" …> or an inline SVG; the cell's text names the client) and the Scene in the viewer for the project's image, with its description as the alt text and ratio set to its width over its height. The comment above Scene says where.
How are the marks drawn?
Six shapes (a circle, a rounded square, a hexagon, a diamond, an arch and a shield) as one path each in a 40 by 40 box, filled or outlined in turn, with the client's letter as text over it. They use your theme's foreground and background, so they are as dark as your text in either theme, and the letter is real text rather than part of the drawing.
Is there one viewer or one per client?
One. The block keeps whether it is open and which client it shows, so a mark, Previous client, Next client, an arrow key or a swipe only changes the client. Previous and Next wrap around. The title, the brief and the result follow, the picture fades in (still with reduced motion) and a polite line says "Larkwick Tea, The Evening Blend tin, 1 of 12" for a screen reader.
How does it work with a keyboard?
Tab reaches each mark and Enter or Space opens the viewer. Inside, the arrow keys move to the previous and next client (mirrored in a right-to-left layout), Home and End jump to the first and last, Tab cycles through the close button and the two buttons, and Escape closes. Focus returns to the mark of the client you were looking at, not the one you opened, so step on three clients and close and you land on that mark.
The Dialog takes finalFocusEl, a function that returns that mark.
How does it fit on a phone?
The marks go three across, four rows, with no scrolling sideways. The viewer fills the screen: the counter and close button at the top, the project as large as it fits, and the title, brief and result with full-width Previous client and Next client buttons at the foot. A horizontal swipe over the picture steps through the clients too.