Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Use Case Tab-Filtered Logos Block for Solid

Three large trigger cells by genre, then a row of five customer wordmarks and a band that says how those studios use a photo proofing tool, in three steps.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

A tab-filtered logo block for Solid with Ark UI. A header, "Photographers proof on Isinglass in every genre" and one sentence, sits over a band of three large trigger cells divided by hairlines: Weddings, Product shoots and School portraits, each with an icon, its name and one line, the open one tinted and underlined. Choosing a cell swaps the panel under it: a row of five customer wordmarks in cells that share their hairlines, then a band with a heading, a sentence and three numbered steps on how studios of that kind use the product. The panels share one grid cell, so the block keeps its height whichever genre is open, and it ends on the steps, so the next section's top rule closes it. On a phone the cells shrink to an icon and a name, three across, and the logos go two across. Built from Tabs and Guides, with CSS for the entrance and the hover and your theme's tokens for every colour. For products whose customers use them in distinct ways.

FAQ

How do I change the genres, the steps and the customers?

Edit USE_CASES and CUSTOMERS at the top of the file. A use case has an id, an icon, a name, the line on its trigger, a title and a pitch for its panel, and three steps. A customer names its genre in group, with an icon, a name and a style (an index into STYLES). Keep five customers per genre, so the row is full, and three steps.

How does it work with a keyboard and a screen reader?

The cells are a real tab list named "What you shoot": the arrow keys move between them (mirrored in a right-to-left layout), Home and End jump to the first and last, and Tab moves on into the open panel. A trigger's name is its genre and its line. Each panel has an h3 for its title, an h4 per step in a numbered list, and the logos in a list named "Customers".

Why doesn't the page move when I switch genres?

Every genre's panel is also rendered once more, unseen, stacked in the same grid cell as the real panel, hidden from assistive technology and the keyboard (aria-hidden and inert). The cell is as tall as the tallest of them, so switching only swaps what shows and nothing below it moves. Panels that aren't open are not in the page's accessibility tree twice.

How does it fit on a phone?

Below sm the trigger cells drop their one-line description and centre an icon over the name, so three still fit across at 320 pixels. The five logos go two across, the last one spanning the row, and the steps stack under the heading.

Why does the block end without a bottom rule?

It ends on the steps, with its own padding inside. The next section draws its top rule along the block's foot, so a bottom rule here would double it, and the column has no bottom padding for the same reason.

What moves, and what happens with reduced motion?

The header and the tabs fade up once when the page loads, the open cell's underline fades in, and each logo's colour eases on hover. Switching genres swaps the panel at once. With reduced motion the entrance and the transitions are off.

All 100 logos blocks