shadcn.io is not affiliated with official shadcn/ui
Channel Matrix Team Block for Radix UI
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 Radix 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.