shadcn.io is not affiliated with official shadcn/ui
Reminder Thread Integration Detail Block for React Aria
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 React Aria, 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
- Reminder Composer Integration SetupChoose and verify
- Number Picker Integration GridCards and previews
- Delivery Receipts Search Integration ListSynced tables
- Pinned Comments Integration DetailWith a product drawing
- Slack Detail IntegrationScopes and steps
- Dunning Schedule Detail IntegrationScopes and steps