Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Language Filter Support Team Block for Solid

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 Solid with Ark 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.

All 126 team blocks