shadcn.io is not affiliated with official shadcn/ui
Animated Underline Tab-Filtered Logos Block for React
Three flat tabs on a ruled band with a sliding underline, over six customer wordmarks in cells set apart, for a property listings site.
Installation
Overview
A tab-filtered logo block for React with Base UI. A start-aligned header, "Listed on Gablefront by 12,000 agencies" and one sentence, sits over a ruled band of three flat tabs: Estate agents, New builds and Lettings. The underline under the selected tab is one element that slides to the next tab when you choose it, a CSS transition on a transform, and it stops moving under reduced motion. Each tab shows six customer wordmarks in a three-by-two grid of cells set apart, their hairlines overshooting the corners at + marks; the panels share one grid cell, so the block keeps its height whichever tab is open. The band scrolls sideways on a narrow phone and the wordmarks go two across. Built from Tabs and Guides, with CSS for the entrance, the slide and your theme's tokens for every colour. For listings, marketplaces and directories whose customers fall into a few kinds.
FAQ
How do I add or rename tabs?
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 each tab lists its group's customers. Keep six per tab so the grid is full. The underline moves by whole tab widths, so every tab has the same width (--tab); for a fourth tab add one more has-[…]:[--i:3] class to SLIDER, and one trigger.
How does the underline slide?
The tabs are equal widths, and the wrapper around them holds a custom property --i, the index of the selected tab, which a CSS :has() rule sets from whichever trigger is selected. The underline is a single element translated by --i tab widths with a transition, so it needs no script and no measuring, and it flips direction in a right-to-left layout. The catalog's own sliding indicator, which Ark draws and the other libraries don't, is turned off so all four libraries look the same.
How does it work with a keyboard and a screen reader?
The tabs are a real tab list named "Listing type": 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. Each panel is a list named "Customers"; the icons are hidden from assistive technology. Focusing a tab selects it, as on the other libraries, so an arrow key both moves and switches.
Why doesn't the page move when I switch tabs?
Every tab's grid 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?
The three tabs are narrower on a phone (104 pixels each), so they fit at 375 and the band scrolls sideways at 320; the grid is two columns of three rows, the cells are bordered boxes, and the overshooting lines are drawn from sm up, where the gaps are wide enough for them.
What moves, and what happens with reduced motion?
The header and the tabs fade up once when the page loads, the underline slides between tabs, and each logo's colour eases on hover. Switching the panel itself is instant. With reduced motion the entrance, the slide and the hover transitions are off: the underline jumps.
Related
- Pro
Category Grid Tab-Filtered Logos
Tabs and filtersFour pill tabs (All, Growers, Co-ops, Advisers) over a wall of eight customer wordmarks in shared hairline cells, for a farm planning tool.
- Pro
Tab Counts Tab-Filtered Logos
Tabs and filtersFour 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.
- Pro
Use Case Tab-Filtered Logos
Tabs and filtersThree 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.
- Pro
Twelve customer wordmarks for a recipe-costing tool, each in a cell of its own whose lines run past its corners with a + mark, four across on desktop and two on a phone.
- Pro
Categorized FAQ
Topics and filtersA topic-tabbed FAQ for a bookkeeping app: a compact header, a band of line tabs with a count on each, and one accordion per topic.
- Pro
Tabbed Carousel Banner
Disclosures and tabsA tabbed announcement for a documentation platform: a card with three underline tabs (What's new, Tips, Updates) and a panel under them, driven by the visitor, with no autoplay.