shadcn.io is not affiliated with official shadcn/ui
Alternating Cards Timeline Block for Ark UI
A property negotiation as alternating cards on a rail, buyer offers at the start and seller offers at the end, with the distance between offers derived, a convergence band, and a counter form that appends a card with Undo.
Installation
Overview
Follow an offer and counter-offer to the point where they meet with this alternating cards timeline for React with Ark UI. It is written for Bidmark, a fictional property offer tracker. A hairline frame with a plus mark on each corner holds a negotiation over a house: the buyer's offers on the start side of a central rail and the seller's on the end side, each card with its amount in tabular figures, its date and its conditions, and between two offers a chip such as "€4,000 apart", worked out from the amounts. A band above the rail draws the latest buyer and seller offers on one line and says "Gap now €2,500, down from €14,000". At the foot, an amount field and one primary Shine Button, "Add counter", check the amount against the last two offers, say what is wrong in words if it fails, and otherwise add a buyer card, update the gap and say that nothing was sent; Undo takes it back. On a phone the rail moves to the start and every card names its side. It is built from Input, Label, Button, Shine Button and Guides, with a CSS entrance and your theme's tokens for every colour. For property offers, procurement bids and any back-and-forth. The offers are example data.
FAQ
How do I change the offers?
Edit OFFERS at the top of the file, oldest first. Each offer has an id, a side of buyer or seller, an amount in whole euros, an ISO at time in UTC and its terms. The chips, the gap now and the gap it started from are derived from the amounts; change FLOOR and CEILING if your numbers fall outside the band's range.
What does the counter field check?
That the amount is a number, that it is higher than your last offer and that it is lower than the seller's latest price, since at or above that you would be paying their price and should accept it instead. A failure is written under the field and announced; a valid counter adds a card dated at the fixed "now".
What stays in the page, and how do I send it for real?
The added card is local state and nothing leaves the page; the status line says so. To send it for real, call your own endpoint where submit appends the offer, and add the returned offer to the list. Undo would then become a call that withdraws it.
Is it accessible?
The rail is an ordered list in date order; each card names its side in a heading and the chips are plain text. The field has a visible label and its hint and error share one reserved line, so the form does not jump. The convergence line is described in words, and the status line is a polite live region.