Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Banner blocks

Pro

Team Presence Live Banner Block for Radix UI

A presence callout for a team workspace: a live "4 of 5 teammates active" count over a band of five cells, each an initials avatar with an active or idle dot, a name and the document they are in.

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 presence callout for React with Radix UI, for a workspace where it matters who is here. A header holds a green status dot, the live count ("4 of 5 teammates active") and a roster link; under it a band ruled from the page's own rail marks holds five cells split by hairlines that meet the top rule. Each cell is an initials avatar with a dot (green when active, grey when idle), a name, and what they are doing: "Editing Pricing" or "Idle 4 min". A few seconds after load the idle teammate comes back to work, so the count rises to "5 of 5" once and a polite status line says so. From lg the five cells share the width; below it the band is a snap scroller. It's built from Guides, Avatar and Status, with your theme's tokens for every colour. For team workspaces, document editors and shared boards.

FAQ

How do I change the people?

Edit PEOPLE: each entry has a name, initials, the doc they are in and whether they start idle. The count in the heading is worked out from the list. To show photos, add an AvatarImage before the fallback in each cell; the initials stay as the fallback while it loads.

What changes while the page is open, and what do screen readers hear?

Once, seven seconds after load, the idle teammate's dot turns green and the cell says "Editing Q4 plan", and the count goes from 4 to 5. A polite status line that is in the page from the start, visually hidden, says "Jun Watanabe is back, editing Q4 plan. 5 of 5 teammates active." To connect real presence, update the list from your presence channel and set that line only when someone arrives or leaves.

How do I reach the cells on a phone?

Below lg the roster is a horizontal snap scroller. It takes focus itself, so the arrow keys scroll it, and its name is "Teammates". From lg the cells fit side by side and the scroller's focus stop and snapping are off.

Why is there no hover card on the avatars?

Everything a hover card would say is already in the cell: the name and what they're doing. Nothing needs a pointer to be read, so it works the same on touch and with a keyboard.

Why is idle grey, not a status colour?

Idle is not a problem, just a quieter state, so its dot is the muted tone and only active people get the success colour. The cell's text says "Idle 4 min" too, so the dot is never the only signal.

Does it work in a right-to-left layout?

Yes. The cells fill from the inline start, the dividers sit on each cell's start edge, the avatar's dot sits at its end corner and the link's arrow mirrors. The counts are wrapped in bdi.

All 100 banner blocks