shadcn.io is not affiliated with official shadcn/ui
Reminder Composer Integration Setup Block for Solid
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.
Installation
Overview
An integration setup section for Solid with Ark UI, written for Chimewell, a fictional appointment-reminder tool for clinics, and its Twilio connection. A compact header carries the title, one sentence and the mark pair at its end. Then three bands under their own rules. The form band takes the reminder template, a textarea that knows the {name} and {time} tokens, with a live count of characters and segments; behind a divider, a checkbox that the message includes STOP to opt out, a test number and a "Send a test" button. The preview band draws the reminder as it would arrive, with the tokens filled in with example values, beside the figures that decide its cost: characters, encoding (GSM-7, or Unicode when any character is outside it), segments and the room remaining in the last one. The foot band holds a polite status line and a "Finish setup" Shine Button that waits for the test. It's built from Guides, Field, Textarea, Input, Checkbox, 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. Nothing is stored or sent.
FAQ
What really happens when I send a test or finish?
Nothing leaves the page. "Send a test" checks the template (it has text, it includes STOP, the opt-out box is ticked, the number is valid) and says "Sent in this demo". "Finish setup" says "Connected in this demo" and clears the test number. Nothing is stored and no request goes to Twilio; wire your own handlers where each would call your API.
How are the segments counted?
A text in the GSM-7 alphabet fits 160 characters in one segment, or 153 each once it is joined from several; characters in its extension table, like braces and the euro sign, count twice. One character outside the alphabet, such as an emoji or a curly apostrophe, moves the whole message to Unicode: 70 characters in one segment, 67 each when joined. The figures are counted on the preview, with the tokens filled in, because that is the text a patient receives.
Why only 555-01xx test numbers?
Those numbers are reserved for fiction, so a demo can never point at a real phone. Replace isTestNumber with your own check when you wire the block up.
How do keyboard and screen reader users work it?
Every field has a visible label; the checkbox is named by its sentence. The visible counter is hidden from screen readers and a separate polite line speaks only the segment count, so typing is not narrated character by character. The status line at the foot is a polite live region present from load.