shadcn.io is not affiliated with official shadcn/ui
Pricing Comparison Table Block for Svelte
A supplier quote comparison for six items and four suppliers, with a quantity field on every item, the lowest line marked in each row, a delivery switch, totals, the cheapest overall and the saving against the dearest.
Installation
Overview
Decide who to buy from, with this pricing comparison table for Svelte with Ark UI. A procurement tool lines up four suppliers' prices for the same six items in a native table. Every item has its quantity in a Number Input, and changing one recomputes every supplier's line total; the lowest line in each row is marked with a check and the word "Lowest", never a colour. The foot adds each supplier's delivery when the Switch in the header is on, totals them, marks the cheapest overall and a polite line says what that saves against the dearest. On small screens the table scrolls sideways under a sticky item column, with a fade at the edge and a hint under it. This is a supplier quote comparison, not a pricing-plan one. It's built from Number Input, Switch and Guides, with a CSS entrance only. For purchasing, tendering and any decision between like-for-like quotes.
FAQ
How is Lowest decided?
For each item, the supplier with the smallest line total for the quantity in the field; suppliers that tie are all marked. An item with a quantity of 0 marks no one. Because every supplier is asked for the same quantity, this is the same as the lowest unit price, but the line total is what the row shows.
How are the totals and the saving worked out?
Each supplier's total is the sum of its line totals, in cents so there is no rounding drift, plus its delivery charge when Include delivery is on. The cheapest overall is the smallest total, and the saving is the dearest total minus the cheapest. The sentence under the table repeats both with the supplier names.
What does Include delivery do?
It adds each supplier's typed delivery charge to its total, and the Delivery row shows the charges or a dash. Switching it can change who is cheapest overall, because a supplier with free delivery gains on small orders.
What changes on a phone?
The table keeps all five columns and scrolls sideways inside its labelled region while the item column and its quantity stay in place. The end edge fades and a line under the table says "Scroll sideways to see all four suppliers".
Is it accessible?
The table has a caption, column heads and row heads, and every quantity field is named for its item ("Quantity of Cable tray 3 m"). The marks are a check and a word, so nothing depends on colour. One polite status line gives the cheapest overall after each change.
What stays local, and how do I wire it for real?
Everything: the suppliers, prices and delivery charges are typed at the top of the file and nothing is ordered or sent. To wire it up, replace SUPPLIERS and ITEMS with the quotes your suppliers returned, keep the helpers that derive the lowest marks and the totals, and send the chosen supplier and quantities from your own button.