shadcn.io is not affiliated with official shadcn/ui
Regional Tabs Logos Block for Svelte
Customers of a candle-subscription service by region: four tabs with counts switch a two-column list, each cell a wordmark with its city and country.
Installation
Overview
A regional logo list for Svelte with Ark UI. A centred header and four tabs (All, Americas, EMEA and Asia Pacific), each with a count of its customers, sit over a list in two columns. A cell is a customer's wordmark, in its own lettering and muted until hovered, with its city and country: beside it from sm, under it on a phone. The cells run from rail to rail, divided by hairlines that start at the page's top rule with + marks on the rails. Each tab opens the region's own panel, so a screen reader hears the tab, its count and then the list. Every panel is held at the tallest one's height by an unseen copy, so switching never moves what follows, at any width. Built from Tabs, Badge and Guides, with CSS for the entrance.
FAQ
How do I change the customers and regions?
Edit the three lists at the top (AMERICAS, EMEA, APAC): each customer is a name, an icon, a lettering, a mark and its city and country. REGIONS joins them, and "All" is the three together, so its count and its rows can never disagree with the others. To add a region, add a list and a line in REGIONS.
How do the tabs work with a keyboard?
The tab list is one tab stop: the arrow keys move between the tabs and open each panel as you reach it, and Tab then goes into the open panel. Each tab's count is part of its name ("Americas 3"), and the list in the panel is named after the region.
Why is there empty space under a short panel?
The panels are stacked in one grid cell with an unseen copy of the longest panel (All), so the block keeps its height and nothing below it jumps when you switch tabs. A region's cells sit at the top and the rest of the cell is left empty. Delete the copy (the invisible div) if you prefer the block to shrink to the open panel.