shadcn.io is not affiliated with official shadcn/ui
Response Times Matrix About Block for Solid
Support promises as a framed matrix of channels by plan, each cell giving the promised first response and last quarter's median, with the Enterprise column ringed and a status dot per channel.
Installation
Overview
A support response-times matrix for Solid with Ark UI, written for Helpdoor, fictional help-desk software. Channels run down (email, chat, phone), each with a dot and words for whether it is open now, and plans run across (Free, Team, Enterprise). Each cell gives the promised first response and, under it, the median Helpdoor actually achieved last quarter, so a promise always sits next to its record; a plan without a channel shows a dash and is read as "Not included". The Enterprise column is ringed in the foreground and tinted, the block's one emphasis. The table is framed with corner marks and, on a phone, scrolls sideways in a labelled, focusable region with the channel names pinned at the start. For pricing, support and trust pages. The figures and the channels' open state are example data.
FAQ
How do I change the channels, plans and times?
PLANS names the columns and CHANNELS the rows. Each channel has an id, a name, whether it is online, the words that say so, and one entry per plan with a promised and a median text, or null where the plan lacks the channel. Keep one entry for every plan. The ringed column is the last plan.
Is the online dot live?
No, it is a sample state that you set in the data. To make it live, compute online and state from your own schedule on the client after the page loads, so the server and the browser agree on first render. The dot is decorative; the words beside it carry the meaning.
How is the column ringed?
With inset shadows on its cells: the sides on every cell, a cap on the header and a foot on the last row, plus a soft tint. A shadow does not change the table's layout and follows your theme's text colour.