shadcn.io is not affiliated with official shadcn/ui
Channel Matrix Team Block for React
How to reach the people at an uptime monitor: one table of people by chat, email, video and phone, with the channel to try first drawn as a filled check, how fast each replies, and a caption for urgent.
Installation
Overview
A "how to reach us" section for React with Base UI, for Pinnock, an uptime monitor. A start-aligned header sits over one table that runs from rail to rail. Each of six people is a row: their name and role, then four channels (chat, email, video and phone) as a check where they use it and a dash where they don't, the one to try first drawn as a filled check, then how fast they usually reply. The columns and rows share their hairlines, and a caption under the table says what to do when it is urgent: phone the on-call line. On a phone the channel headers become icons, the avatars go and the reply time moves under each name. It has no state, so it is a plain server component, built from Avatar and Guides with a native table. The people, their habits and the on-call number (a reserved 555-01xx line) are fictional.
FAQ
How do I change the people or the channels?
Edit PEOPLE and CHANNELS at the top of the file. A person has a name, a role, a reply as written in the table and the channels they use, the one to try first listed first. A channel they leave out is drawn as a dash; the on-call number is ON_CALL.
Is the table readable without colour?
It uses none: a filled check means "try first", a ringed check means "used" and a dash means "not used", and each mark carries those words for a screen reader ("Try first", "Used", "Not used"). The caption explains the filled check.
Is it a real table?
Yes: a native table with a caption, th column headers with scope="col", and each person as a th with scope="row". It is a native table on every library, because the React Aria catalog's table is a grid without captions or scopes. The channel names stay in the page for screen readers even where only the icon shows.
Related
- Pro
Status Filter Team
Hours and placesA 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
Working Hours Strip Team
Hours and placesHow to work with one producer at a podcast host: her three channels ranked 1 to 3, how fast she replies on each, and her working day as a 24-hour strip with a marker at the time it is there now.
- Pro
Language Filter Support Team
Lists and directoriesThe 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.
- Pro
Coverage Heatmap Team
Skills and expertiseA heatmap of six skills by five field-survey people, every cell a button shaded in five foreground steps with its level written in it, a target column, a coverage count with a Thin marker and a polite line that names the picked cell.
- Pro
Choose a Person Contact
Contact formsA band of four people, each a radio cell with initials, role and reply time, that addresses the form below it: a form that names its recipient, checks itself and confirms in place.
- Pro
Slot Picker Office Hours Team
Hours and placesWeekly 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.