shadcn.io is not affiliated with official shadcn/ui
Auto Replies Settings Block for React
A vacation responder settings panel that leads with the sentence the settings amount to, a form with a subject, a message with variable chips, two date fields and a once-per-sender rule, beside a framed drawn email filled from a sample sender.
Installation
Overview
Set what a shared inbox answers while someone is away and see the reply as a sender would, with this vacation responder settings panel for React with Base UI. A hairline frame with a plus mark on each corner leads with one sentence worked out from the settings ("Replies from Mon, Oct 19 to Mon, Oct 26 (8 days), once per sender every 7 days, and never to mailing lists"). Beside the form a framed, drawn email shows the reply with every variable filled from a typed sample sender. The form has an Input for the subject, a Textarea for the message and a row of variable chips (the sender's name, the return date, a backup person, your name) that insert at the caret; a variable the responder doesn't know is flagged and Save refuses it. Two date fields set the first and last day, the end has to follow the start and the start can't be in the past, a Number Input sets how many days one sender waits before hearing back, and a Switch skips mailing lists. An action foot counts unsaved changes beside a Shine Button that saves them in the page and an outline Discard. It's built from Input, Textarea, Number Input, Switch, Field, Button, Shine Button and Guides, with a CSS entrance only. For a shared inbox, a helpdesk or any mail product with an away message.
FAQ
How do I change the message, the variables and the dates?
Edit SAVED at the top: the subject, the message, the first and last day as ISO dates, how many days between replies and whether lists are skipped. VARIABLES lists what the chips offer and sampleOf gives each its value for the preview (the sender, the owner and the backup are typed constants, and the return date is the day after the last day). AS_OF is the fixed day a start can't precede. The sentence, the day count and the unsaved count are worked out from the settings.
How are the dates checked?
The date fields are the browser's own, so they follow its language and calendar picker and hold ISO dates. The end must be on or after the start, otherwise the sentence says no reply would go out, a message sits under the fields and Save refuses with focus on the last day; the start can't be before the fixed current day. Clearing a field is ignored until a full date is typed.
What does once per sender every N days mean here?
It is the number of days a sender waits before another reply goes to them, from 1 to 30. The number field settles on blur and rewrites an out-of-range entry to the nearest allowed one, and the sentence reads it as day or days. Nothing is counted in the demo; in your app, keep the date of the last reply per sender and address and skip a sender inside the window.
What stays local, and how do I make it real?
Everything. Nothing is sent or scheduled: the senders, the names and the dates are typed into the page, and Save keeps the draft in the page's state. To make it real, store the responder with the mailbox, answer each incoming message on your server (never to a list, a bounce or an address that has already had one in the window), and add the standard auto-submitted header so other responders don't answer yours.
How does it look on a phone, and is it accessible?
The form comes first and the drawn email under it, and the action foot is pinned to the bottom of the screen. The preview is hidden from assistive technology and its subject is restated in text; the chips are real buttons named by their variable, the unknown-variable message and the date message are read with their fields, and the status line is a polite live region that also says what a chip inserted. The subject and the message take their direction from what is typed.
Related
- Pro
Email Templates Settings
NotificationsAn email templates window of three panes: the templates with an on switch each, an editor with subject, message and variable chips that insert at the caret, and a drawn email filled from a sample person you pick.
- Pro
Notification Preferences Settings
NotificationsA notification settings panel: a channel strip with all-or-nothing checkboxes, a matrix of switches by activity and channel with a locked security email, quiet hours, and a save bar that counts unsaved changes.
- Pro
Email Preferences Settings
NotificationsA preference-centre page, the one an email footer links to: five topics each with a switch and a frequency menu, a digest mode, a computed email volume and an unsubscribe-from-everything that locks the rows and turns Save into Resubscribe.
- Pro
Quick Reply Dialog
Pickers and searchA helpdesk ticket with its saved-replies dialog shown open: a searchable list of eight replies, a preview filled from the ticket, a flag and a field for each variable it cannot fill, an SMS character count and an Insert reply button that writes into the composer.
- Pro
SMTP Settings
Domains and deliveryAn outgoing mail settings panel that leads with how mail will leave, a server form with presets, an encryption choice and a masked password, beside a dark terminal that plays a simulated SMTP session or stops at the mismatch a real server would give.
- Pro
Changelog Preferences Settings
NotificationsA changelog email panel of subscription cells on shared hairlines, one per product area with its release strip and a Follow toggle, a delivery choice, locked breaking changes and a computed email volume.