Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Logos blocks

Pro

Category Grid Tab-Filtered Logos Block for Svelte

Four pill tabs (All, Growers, Co-ops, Advisers) over a wall of eight customer wordmarks in shared hairline cells, for a farm planning tool.

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 wall for Svelte with Ark UI. A centred header, "Planned on Tillage by 3,100 farms" and one sentence, sits over a pill-shaped tab list with four tabs: All, Growers, Co-ops and Advisers. Each tab swaps in its own wall of eight customer wordmarks in cells that share their hairlines, running from rail to rail and ending the block, so the next section's top rule closes it. The panels all sit in one grid cell, so the wall keeps the same height whichever tab is open and nothing below it moves. Every wordmark is real text in its own lettering with an icon beside it, above it, after it, in a ring or knocked out of a badge, muted until hovered. Two columns on a phone, four from md; the pills scroll sideways on a narrow screen. Built from Tabs and Guides, with CSS transitions for the entrance and your theme's tokens for every colour. For products that serve a few kinds of customer and want each to see people like themselves.

FAQ

How do I change the tabs and the customers?

Edit CUSTOMERS at the top of the file: each entry is a group (growers, coops or advisers), an icon (any Lucide icon), a name and a style, the index of one of the logo styles in STYLES. A tab shows the customers of its group, and the All tab shows ALL, a hand-picked spread. Keep every group at eight, so each tab fills the wall and no cell is empty, and add a tab by adding an entry to TABS and a group of eight.

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

The pills are a real tab list named "Customer type": the arrow keys move between tabs (mirrored in a right-to-left layout), Home and End jump to the first and last, and Tab moves on into the open panel. Each panel is a list named "Customers" whose items read as the company names; the icons are hidden from assistive technology.

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

Every tab's wall 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 do I use real company logos?

Replace the icon and name in Wordmark with the company's logo, at about the same height for all of them (h-6 to h-8). An inline svg drawn in currentColor, with role="img" and an aria-label, keeps the muted colour and the hover. The names here are fictional placeholders.

How does it fit on a phone?

The pills sit in a row you scroll sideways, so four tabs fit at 320 pixels, and the wall becomes two columns of four rows; the cells keep their hairlines and nothing scrolls the page sideways.

What moves, and what happens with reduced motion?

The header, the tabs and the wall fade up once when the page loads, and each logo's colour eases on hover. Switching tabs swaps the wall at once, with no animation. With reduced motion the entrance and the hover transitions are off.

All 100 logos blocks