shadcn.io is not affiliated with official shadcn/ui
Service Package Checkout Block for Svelte
Booking a web-studio package: a fixed-price package, add-ons that each add money and days to a derived timeline, a deposit or pay-in-full choice, and a milestone table re-worked to the cent with the remainder on the last row.
Installation
Overview
Sell a service with a clear price, a clear timeline and a clear payment plan, with this service-package checkout for Svelte with Ark UI. A compact header from Upland Co, a small web studio, sits over a hairline frame in bands. The first band is the package, a Brochure site at $4,800, with what it includes. Next, add-ons are Checkbox rows, each adding its price and its days, so the build time reads "3 weeks 4 days" when it is 25 days. Then a pair of radio cards chooses how to pay: a 30% deposit now, or in full for 5% off. A milestone table (Today, On first draft, On handover) is worked out again to the cent whenever the add-ons or the choice change, with the rounding remainder on the last row so the rows always add up to the total. An agreement box starts unticked. Pay is the only Shine Button and shows the amount due today. It's built from Checkbox, Label, Shine Button and Guides, with a CSS entrance only. For agencies, freelancers and any service sold in stages.
FAQ
How is the timeline worked out?
The package has a base number of days (21), each add-on adds its own, and the sum is shown as weeks and days by one helper (spanText): 25 days reads "3 weeks 4 days", 28 reads "4 weeks". The same number appears beside the milestone table's heading and in the result, so it is never typed twice. These are calendar days; a real quote would say whether they count from the deposit or from your content arriving.
How does the milestone table add up to the cent?
Everything is whole cents. In the deposit plan the first row is 30% of the total and the second 40%, each rounded once, and the last row is the total minus those two, so the remainder always lands there and the three rows sum to the total exactly. In the pay-in-full plan the first row is the total less 5% and the other two read $0.00 and "Paid already". Multiplications happen before divisions (cents * 30 / 100).
Where does the 5% go?
The Total row at the foot of the table shows the amount after the discount, and the line under the table says how it was worked out ("$5,400.00 less 5% ($270.00)"). With the deposit plan there is no discount and that line says how the rounding works. The Pay button always shows what is due today.
What happens if I press Pay without agreeing?
The button is never disabled. The press says "Not paid" in the polite status line, shows the problem under the agreement box and moves focus to the box. The box starts unticked because consent should be chosen, and the deposit's terms are written next to it rather than behind a link.
How does it look on a phone?
The bands stack in the same order. Each add-on row keeps its checkbox, name, hint and the price with its days at the end. The milestone table drops its Share column and keeps the milestone and its amount, and the Pay button is pinned to the bottom of the screen with the status line above it.
What stays local in the demo, and how do I wire it up?
Everything. The package, the add-ons and the plan live in the file and the block's state, nothing is booked or signed, and Pay waits 700 ms and says that nothing was charged. To connect it, load the package and add-ons from your catalogue, create the booking and the payment schedule on your server (the amounts there are the ones that count), and take the deposit with your provider's hosted fields.