shadcn.io is not affiliated with official shadcn/ui
Auto Replies Settings Block for Svelte
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 Svelte with Ark 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.