shadcn.io is not affiliated with official shadcn/ui
Priority Support Toggle Billing Block for Svelte
Priority support priced by the day: choose Every month or Just these dates, pick a range on a calendar, and read the days covered, the price against its cap and the faster response time.
Installation
Overview
Sell priority support for the days it is needed, with this add-on for Svelte with Ark UI. It opens with the account of Launchbarn, a landing-page builder. A hairline frame with a plus mark on each corner holds two cells. The first is the choice, a Segment Group of Every month or Just these dates, a Switch that repeats the same days every month, and the result under them: the days covered and the price at $6.00 a day capped at $149.00, the dates in words, and the response time, 1 hour instead of 24. The second is a range Calendar that begins on the fixed day 15 Oct 2026 and runs 90 days on, with a launch week, 2 to 8 Nov, already picked: Covers 7 days: $42.00. Every month turns the calendar off and prices the flat $149.00. The Shine Button adds the support, the only colored control. On a wide screen the calendar stands first and the choice beside it; on a phone the choice leads and the calendar follows. It's built from Segment Group, Switch, Calendar, Shine Button and Guides, with a CSS entrance only. For billing settings, add-ons and any support plan sold by the day.
FAQ
How is the price worked out?
Days are counted with both ends, so 2 to 8 Nov is 7 days, and each costs DAY_CENTS; the sum never goes over CAP_CENTS, so from 25 days the cap applies and the result says how much it saved. Every month is the cap, whatever the month holds. The prices are in integer cents and the dates are ISO strings written in UTC, counted from the fixed AS_OF, so the page reads the same on the server and in every time zone.
How do I pick the range?
Choose the first day and then the last day. Until the second is chosen the result says Pick the last day and the button waits. Days before today and after the 90th are unavailable. The range calendar reports each press, so the result updates after the first day too.
What does repeating every month do?
With Just these dates, the switch makes the same days of the month part of the plan, so the result reads each month and the price repeats. With Every month the switch is disabled, since every day is already covered. The calendar is taken out of the tab order then, and a line above it says there are no dates to pick.
What does Add priority support do, and what stays local?
It says "Added in this demo. Nothing was charged." in a polite status message and the button waits until you change something. Nothing is bought or scheduled. In your app send the mode, the two dates and whether it repeats to your server, create the add-on there, and show the invoice line it produced.
Is it accessible?
The calendar is a labelled grid you move through with the arrow keys, the segment and the switch have names, and the result is text with the dates in time elements. Prices and counts are kept whole in a right-to-left page. The button stays focusable while it waits and says what is missing.