shadcn.io is not affiliated with official shadcn/ui
Response Times Matrix About Block for React
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 React with Base 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.
Related
- Pro
Severity Ladder SLA About
Support and contactAn incident tool's four severities as bands, each with its response and resolution drawn as bars to scale on one log time axis, a compliance figure and a framed note on credits.
- Pro
Reliability Record API Stats About
Security and platformAn API's reliability record: a 30-day status grid with one flagged day, the computed uptime beside it, and a framed table of endpoints with volume, p95 latency and success rate.
- Pro
Guarantee Certificate About
Principles and processA home-warranty guarantee drawn as a certificate: a seal in SVG above the title, three promises with ticks, the fine print behind a disclosure that stays in the page, and a Shine Button to start a claim, in a card in card.
- Pro
Status Grouped Compliance Badges About
Security and platformA compliance list for a vendor-risk tool grouped by status, In force and In progress, each row a generic programme with its scope, last audit and next step, with a ghost link to request the report.
- Pro
A framed table of seven company figures for an open-startup tracker: last quarter, this quarter, the computed change and a thin bar toward each target, sortable by metric, change or progress.
- Pro
A framed, sortable table of a product-feedback tool's seven-member customer council, with expertise badges, the year each member joined and an apply band with a Shine Button.