shadcn.io is not affiliated with official shadcn/ui
Tab Counts Tab-Filtered Logos Block for Vue
Four pill tabs with a count on each, in a hairline band over a caption and a grid of customer wordmarks in cells set apart, for a design tokens tool.
Installation
Overview
A tab-filtered logo block for Vue with Ark UI. A centred header, "Tokens kept in sync by teams like yours" and one sentence, sits over a band between two hairlines, with + marks where its top rule meets the rails. In it, four pill tabs: All, Product teams, Agencies and Platforms, each with a small count chip worked out from the data, never typed. Under the band a caption says what the grid shows ("Showing 8 of 20 teams" on All, "Showing all 8 teams" on a tab that shows everything it counts), then the customer wordmarks sit in cells set apart, their lines overshooting the corners. The caption is part of each panel, so it always matches the tab. An unseen copy of every panel holds the height, so switching never moves the page. Two across on a phone, four from md; the pills scroll sideways. Built from Tabs, Badge and Guides, with CSS for the entrance and the hover and your theme's tokens for every colour. For products that want visitors to see how many customers sit behind each filter.
FAQ
Where do the counts come from?
From the data. A tab's chip is count, which tabOf sets to the number of customers in its group, and the All tab's is the length of CUSTOMERS; the caption compares it with the number of logos the tab shows. Change a group and both follow. A tab can show fewer logos than it counts (All shows a hand-picked eight of twenty), which is why the caption says "8 of 20".
How do I add a tab or a customer?
Edit CUSTOMERS and TABS at the top of the file: a customer has a group, an icon, a name and a style (an index into STYLES), and a tab is tabOf(group, label). Each panel shows up to eight logos in four columns; the cells are set apart, so a panel with six or seven leaves its last row short without a hole in the grid.
How does it work with a keyboard and a screen reader?
The pills are a real tab list named "Customer kind": 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. A tab's name includes its count, so a screen reader hears "Product teams 8". The caption and the logos, a list named "Customers", are in the panel.
Why doesn't the page move when I switch tabs?
Every tab's panel, caption included, 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.