shadcn.io is not affiliated with official shadcn/ui
Reminder Thread Integration Detail Block for React
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.
Installation
Overview
An integration detail section for React with Base UI, written for Chimewell, a fictional appointment-reminder tool for clinics, and its Twilio connection. A reverse split sits behind a divider: the copy comes first in reading order and sits at the end, the figure is drawn at the start. After the title and one sentence comes a patient's phone drawn as a greyscale outline with the whole exchange on its screen (the reminder, a one-letter reply, the confirmation), then the mark pair above a "Connect Twilio" Shine Button and a "View docs" link. Under a band rule, what the integration sends, reads and never reads as a description list, and how it works in three steps. It's built from Guides, Button and ShineButton, with your theme's tokens for every colour. Twilio is named in text only: no Twilio logo, colour or wordmark ships with the block, and both tiles are icon slots for logos you have the rights to use. The thread and the number are example data; nothing is sent.
FAQ
How do I change the thread and the permissions?
THREAD holds the three texts (who sent each, the words and the time), ACCESS the sends, reads and never-reads lines and STEPS the three steps. The clinic number is the fictional CLINIC_NUMBER, in the range reserved for examples.
Does the Connect button connect to Twilio?
No. Both buttons are plain links to "#"; point them at your own install flow. The block is a detail page, so nothing on it changes state or sends a message.
Where do the logos go?
Each tile is an icon slot with a code comment. Chimewell's tile holds a placeholder icon and Twilio's a two-letter mark; drop in logos you have the rights to use, under the service's brand terms. The block never draws a brand's logo.
How do screen readers get the phone?
The phone's frame, status bar and input bar are hidden from assistive technology. The thread is a labelled list whose items read who sent each text and the words, and the figcaption names the figure.
How does it behave on a phone and in right-to-left layouts?
On a phone the title and sentence come first, then the phone drawing, then the connect action and the details, with a rule between each part. In a right-to-left layout the split mirrors, while the phone drawing keeps its own direction because it shows an English thread.
Related
- Pro
Reminder Composer Integration Setup
Choose and verifyAn 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 previewsAn 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 Receipts Search Integration List
Synced tablesAn 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.
- Pro
Pinned Comments Integration Detail
With a product drawingAn integration detail section for a preview review tool connecting to Vercel: a split with the access it asks for as three scope rows, three steps, a connect action, and a framed browser drawing with two numbered pins and the comment threads they open, each with a Resolve button.
- Pro
Slack Detail Integration
Scopes and stepsAn integration detail section for a spend tool connecting to Slack: a header with the mark pair and Add to Slack, then what it does, the Slack scopes it reads and writes, three steps to install and the listing's facts.
- Pro
Dunning Schedule Detail Integration
Scopes and stepsAn integration detail section for a failed-payment recovery tool connecting to Stripe: the dunning schedule as four hairline cells, a None, Read and Write table of what a restricted key allows, three steps and a Connect Stripe Shine Button.