Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Minimal Avatars Team Block for Vue

A single quiet strip: twelve overlapping initials avatars and a +12 count, each avatar a focusable link whose name and role show in a tooltip, with one line under it that says how many people work in how many countries.

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 team section for Vue with Ark UI, for Tystie, a travel-bookings app, kept to the least a team section can be. A short centred heading, a row of twelve overlapping initials avatars ending in a "+12" count, and one line under them: "24 people in 9 countries". Each avatar is a focusable link to that person's page, and their name and role appear in a tooltip on hover and on keyboard focus. The only line is the page's top rule. On a phone the avatars and the count wrap into two rows, seven and six. It's built from Avatar, Tooltip and Guides, with a CSS entrance and your theme's tokens for every colour. For a footer of an about page, a careers page or anywhere a full roster would be too much.

FAQ

How do I change the people and the count?

Edit PEOPLE for the faces you want to show (a name and a role each) and the MORE and COUNTRIES constants for the rest of the team. The total in the last line is the faces plus MORE, so "24 people" stays honest when you add a face. The countries figure is typed by hand because the faces don't carry a country.

How do the tooltips work with a keyboard and on touch?

The tooltip opens when an avatar is hovered or focused, so Tab walks the strip and names each person as it goes. A tooltip is never the only way to get the name: every link also has the person's name and role as text for screen readers. On a touch screen there is no hover, so tapping an avatar follows its link to the person's page.

What does the +12 mean to a screen reader?

It is read as "and 12 more people" rather than "plus 12", and it is not a link or a focus stop: there is nothing behind it to open. If you want it to open the full roster, make it a link to your team page.

How does it fit on a phone?

Below sm the avatars sit on a grid of seven narrow columns, so the twelve faces and the "+12" wrap into two rows (seven, then six), each face still overlapping its neighbour, and they get smaller so a row fits at 320 px. From sm they are one row.

Can I use photos instead of initials?

Yes: put an AvatarImage in each Avatar, before the fallback. The initials show until the picture loads and whenever it fails. Keep the pictures square; every avatar has a ring in the page's background colour so overlapping edges stay clean on any photo.

Does it animate?

The strip fades in once on load and a hovered or focused avatar lifts a few pixels. Both are CSS transitions and both stop under reduced motion; the hover lift never moves anything but the avatar itself.

All 126 team blocks