Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Language Filter Support Team Block for React

The six people who answer for a returns portal in hairline rows: a presence dot with a reply time and the languages each speaks, and five language chips that float the people who speak one to the top.

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 support-team section for React with Base UI, for Reboxly, a returns portal. A centred header sits over a ruled band of five language chips with a live count, and six support people in hairline rows. A row is an initials avatar, a name and a specific role; a presence dot with the word beside it ("Free to chat" or "In a chat") and "Replies in about 4 min"; and the languages the person speaks as chips. Pressing a language floats the people who speak it to the top (in their usual order, then everyone else), fills the matching chips and dims the other rows in place, so the list keeps its height; pressing the chip again puts everyone back. On a phone the chips scroll sideways and each row stacks. It's built from Toggle Group, Status, Badge, Avatar and Guides, with your theme's tokens for every colour. The people, their languages and their reply times are fictional.

FAQ

How do I change the people and the languages?

Edit LANGUAGES and PEOPLE at the top of the file. A person has a name, a role, their languages (each from LANGUAGES), a presence ("free" or "busy") and a reply time in minutes. The count on each chip and the sentence under the chips are computed from the list.

Why does the filter dim people instead of hiding them?

Hiding rows would shorten the list and move whatever sits below it. Dimming in place keeps the block's height: the matching people come to the top in their usual order, their language chips fill in and their avatars turn solid, while the others stay in the list with a muted tint and name that still pass AA contrast.

What is the dot, and is it only colour?

It is a real presence dot, the one place the block uses colour: green when a person is free to take a chat, amber when they are in one. The words "Free to chat" and "In a chat" are written beside it, and the dot itself is hidden from assistive technology. The colours are the Status component's own tokens.

How does the keyboard work?

Tab moves into the chips once; the arrow keys move between them and Space or Enter presses one. Pressing the pressed chip clears the filter. A polite line under the chips announces the result ("3 of 6 people speak Spanish").

What changes on a phone?

The chips scroll sideways in a row from rail to rail, and the list centres itself when it fits. Each person stacks: the avatar with the name and role, then the presence and reply time, then the language chips, indented under the name.

  • Pro

    Skill Filter Team

    Skills and expertise

    Seven engineers of a build-cache company in hairline rows with their skills as chips, under six skill chips that float the people who know a skill to the top, fill the matching chips and count how many know it.

  • Pro

    Status Filter Team

    Hours and places

    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.

  • Pro

    Hour Scrubber Team

    Hours and places

    A framed slider over the 24 hours of the day in UTC, above nine people in rows that show who is working at that hour with their local time, a day strip and a live count.

  • Pro

    Compact List Team

    Lists and directories

    The quiet roster of a fleet-telematics company: one dense line per person at forty pixels, rail to rail, twelve shown and the other twelve opened in place from a Show all button.

  • Pro

    Support Channels Contact

    Support and feedback

    A support desk for a help desk tool: a band of four channels with their response times above a form with a subject, a normal or urgent priority and a message, which checks itself and confirms in place.

  • Pro

    Slot Picker Office Hours Team

    Hours and places

    Weekly office hours of a pair-programming service: five day tabs, each with three engineers' half-hour slots as pills, and a single Shine Button that reads 'Book Thu 14:00 with Noor' once a slot is picked.

All 126 team blocks