Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Integration blocks

Pro

Delivery Receipts Search Integration List Block for React

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

An integration list section for React with Base 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.

Does the table move when I search?

No. An unseen copy of the full table sits in the same grid cell and sets the height, so fewer rows, or the empty state, leave the space below where it was.

How does it behave on a phone and in right-to-left layouts?

On a phone the template and time fold under the number, and the state keeps its own column. In a right-to-left layout the table mirrors; the digits keep their own direction.

  • Pro

    Reminder Thread Integration Detail

    With a product drawing

    An integration detail section for a clinic reminder tool connecting to Twilio: a reverse split with a patient's phone drawn in outline showing a reminder, a one-letter reply and the confirmation, a connect action, what it sends, reads and never reads, and three steps.

  • Pro

    Reminder Composer Integration Setup

    Choose and verify

    An integration setup section for a clinic reminder tool connecting to Twilio: a reminder template with {name} and {time} tokens, a live count of characters and SMS segments, an opt-out checkbox, a test number, a drawn preview and a Finish setup button that waits for the test.

  • Pro

    Number Picker Integration Grid

    Cards and previews

    An integration grid section for a clinic reminder tool connecting to Twilio: six available numbers as radio cards in shared hairlines, filtered by a segment group (All, Local, Toll-free) and an area-code combobox, with a polite status line that says how many show and which one is reserved.

  • Pro

    Delivery Outcomes Donut Integration Stats

    Rings and tallies

    An integration stats section for a clinic reminder tool connecting to Twilio: a hand-built donut of how reminders ended, with a legend of counts and shares, and three cells for the top reasons a text did not arrive, in words, all worked out from typed counts.

  • Pro

    Recovery Queue Table Integration

    Synced tables

    An integration list section for a failed-payment recovery tool connecting to Stripe: a real table of six failing subscriptions with plan, amount, attempts, next retry and decline reason, a row menu (Retry now, Email customer, Pause dunning) and a tally worked out from the rows.

  • Pro

    Segment List Integration

    Synced tables

    An integration list section for a tracking-plan checker working with Segment: seven held events as table rows with checkboxes, a select-all with a mixed state, working Replay and Discard that take the ticked rows off the list, and an empty state that brings the sample back.

All 100 integration blocks