shadcn.io is not affiliated with official shadcn/ui
Delivery Receipts Search Integration List Block for Radix UI
An integration list section for a clinic reminder tool connecting to Twilio: a real table of eight reminders with a four-tick delivery glyph and a word for each state, a reason in words for the ones that did not arrive, and a search that marks the matching characters.
Installation
Overview
An integration list section for React with Radix UI, written for Chimewell, a fictional appointment-reminder tool for clinics, and its Twilio connection. A compact header carries the title, one sentence with the delivered share worked out from the rows, and the mark pair at its end. Under a band rule, a search field for the recipient's last digits or the template, and a polite status line that counts the matches. Then the delivery receipts as a real table, rail to rail: eight reminders, each with the number it went to, its template, a four-tick glyph and a word for its state (Queued, Sent, Delivered or Undelivered, which also says why in words), and its time. Typing marks the matching characters and drops the rows that do not match; a search with no match shows an empty state. An unseen copy of the whole table holds the height, so nothing below moves. On a narrower screen the template and time fold under the number. It's built from Guides, Input, SearchHighlightText and Empty with a native table and your theme's tokens for every colour, no hue. Twilio is named in text only: no Twilio logo, colour or wordmark ships with the block. The messages are example data and the numbers use the 555-01xx range reserved for examples.
FAQ
How do I change the rows?
RECEIPTS holds each reminder: the last four digits, its template, its state, the reason it did not arrive (empty when it did) and a fixed time. The delivered count in the header and the counts in the status line are worked out from it, and the search reads the same list.
What do the four ticks mean?
They draw how far a message got: one tick for Queued, two for Sent, all four for Delivered. An Undelivered message keeps its first two ticks solid and ends with dashed outlines. The word beside the ticks always says the state, so the glyph never carries it alone, and there is no colour in it.
Is any of this read from Twilio?
No. The receipts are typed example data. A real version would take the states from the status updates Twilio sends about each message, and the reasons from what it reports; here the reasons are written in words ("The carrier filtered the message") rather than numeric codes.
How do keyboard and screen reader users work it?
The search field is labelled and typing filters at once; the status line is a polite live region present from load that says how many messages match. The table has a caption, column headers and the recipient as each row's header cell, and the glyph is hidden from assistive technology because the state is spoken as a word.