shadcn.io is not affiliated with official shadcn/ui
Wedding Planner Chat Block for Svelte
A planner's chat with a Checklist pane of ten items with budgets and Booked checkboxes, a total budget field and a Booked-of-total bar, plus vendor cards whose Hold toggle books the matching item at the vendor's price.
Installation
Overview
Show a couple planning a wedding with a planner, with this wedding planner chat for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Altarwise, a wedding planner's chat: the planner, Imani Ferreira, talks in Message and Bubble rows, and a pane at the end, "Checklist", lists ten items (venue, catering, photographer, music, flowers and more), each with its budget and a "Booked" Checkbox. At the top of the pane a Number Input holds the total budget, 18,000 to start, and a derived sentence reads "Booked 9,400 of 18,000" over a Progress bar; an item booked above its budget says "Over by 600" in words with a warning glyph. Vendor cards in the thread show a name, what they do and a price, with a "Hold" Toggle that books the matching item at the vendor's price. The composer's Shine Button, the only colored control, sends, and the frame is ruled by Guides. For a planner's client portal or any checklist that adds up what you commit to.
FAQ
What stays in the page, and how do I make it real?
Everything. The ten items, the two vendors and their prices are made up and typed in the file; nothing is reserved, sent or stored, and the planner's answers come from a short script keyed on words such as "budget", "cake" and "hold". To make it real, load vendors from your own directory where the cards are drawn and save the checklist where tick and hold change it.
How are the totals worked out?
An item costs its held vendor's price, or its own budget when ticked by hand, or nothing. Booked is the sum of those, compared with the total budget you type: under it the pane says how much is still free, over it "Over budget by" and the amount. All in whole units, with no rounding.
What does Hold do?
It presses the toggle, ticks the matching item and books it at the vendor's price, so a caterer above the catering budget makes that item read "Over by 600". Pressing Hold again releases it and unticks the item; unticking the item by hand releases the hold too.
What if I type a budget that isn't a number?
Whole numbers with commas are read; anything else counts as zero, so the bar stays empty and the pane says every booked unit is over budget instead of showing a wrong figure. Type a number again and it recovers.
Is it usable with a keyboard and a screen reader?
Each item is one labelled checkbox that reads its hint ("Not booked", "Booked" or "Over by 600"); the budget field is labelled; each Hold toggle is named for its vendor and reports whether it is pressed. Over budget is a glyph and words, never a color.