Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Wedding Planner Chat Block for Solid

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.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show a couple planning a wedding with a planner, with this wedding planner chat for Solid 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.

How does it look on a phone?

A two-view toggle under the top bar switches between Chat and the checklist with its count, "Checklist (4 of 10)". The window keeps its height and the pane scrolls inside it.