Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Status Filter Team Block for Ark UI

A live-chat widget's eight people in rows under a ruled pill filter (All, Online, Away, Busy) with counts, each row showing a presence dot, what they are doing and when they were last seen.

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 availability list for React with Ark UI, for Skerrow, a live-chat widget. A compact header sits over a ruled band holding a row of pills, All, Online, Away and Busy, each with its count, and a live "Showing 4 of 8 people" line at the end. Under it, eight people fill rows rail to rail: an initials avatar with a presence dot, a name and a role, what they are doing at the moment, and their status with when they were last seen. Picking a status narrows the rows, and the list keeps its full height, so nothing below it moves. The last-seen words ("22 minutes ago") are read from your clock after the page loads. On a phone the pills scroll sideways and each row is a name with its activity and status under it. It's built from Toggle Group, Status, Relative Time Text, Avatar and Guides, with your theme's tokens for every colour. For a support page, an internal tool or a status page for a team to reach. The people are invented.

FAQ

How do I change the people and their statuses?

Edit PEOPLE at the top of the file: each person is a name, a role, a presence ("online", "away" or "busy"), an activity and ago, how many minutes ago they were last seen (0 means active now). The counts on the pills and the "Showing 4 of 8" line come from the same list, so nothing else needs to change. Connect it to your own presence data by replacing PEOPLE with what your API returns.

Why are the dots green, amber and red when the rest is greyscale?

Presence is the one place colour carries meaning, so the dot uses the Status tokens: online, away and busy. The same word is written beside it in the row, so nobody relies on colour alone. Everything else, the pills included, stays in foreground weights, and the pressed pill is solid foreground so the page's one primary colour stays on its main action.

Is the last-seen time real?

It's counted from the moment the page loads: "22 minutes ago" keeps counting up on its own as the page stays open. Nothing about the current time is drawn into the HTML, so the server and the browser agree on what they first render. Replace ago with a real timestamp from your API when you wire it up.

How does the filter work with a keyboard?

The pills are a labelled group of toggle buttons. Tab enters the group and the arrow keys move between the pills. Space or Enter picks one, and picking the pressed pill again changes nothing, so one is always on. Each change is read out once by the polite line beside the pills ("Showing 2 of 8 people").

How does it fit on a phone?

The pills sit in a sideways scroller that runs rail to rail, and each row folds into three short lines: the name, what they are doing, and their status with when they were last seen. The role is hidden on phones. The list holds its height whichever pill is on.

Why doesn't the page move when I filter?

The list area holds the height of all eight rows, so a short result leaves empty room under it instead of pulling the next section up. The closing space is part of the block; it draws no rule of its own.

All 126 team blocks