shadcn.io is not affiliated with official shadcn/ui
Real Estate Kanban Block for Solid
A four-column listing pipeline (New, Showing, Offer, Closed) of nine properties with prices in cents, a Cut 5% button and a total per column, where a sale closes only out of Offer and never reopens.
Installation
Overview
Move listings from first viewing to sale with this pipeline for Solid with Ark UI. A hairline frame with a plus mark on each corner holds four columns that share their lines (New, Showing, Offer and Closed) and nine properties. Each card shows the address, the bedrooms and floor area, and the asking price, held in integer cents and always read left to right; a "Cut 5%" Button lowers the price to the nearest whole dollar. Every column head counts its listings and totals their prices, and the sentence under the heading is worked out from the cards, so a price cut changes it at once. One rule guards the board: a sale closes only out of Offer, and a closed sale can't be reopened; the refusal says which. A card moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu under "Move to". A polite status line reports each change and Reset restores the pipeline. The frame is ruled by Guides. On a phone the columns scroll sideways in one named region. For agents, property managers and any pipeline with money in each lane.
FAQ
How do I fill it with my own listings?
Edit COLUMNS and START. A listing has an id, the column it starts in, an address, beds, m2 and a price in integer cents. Counts, totals and sentences are calculated from the cards.
How is the money handled?
Prices are integer cents and the cut is integer arithmetic (price * 95 / 10000, rounded, times 100), so no float error creeps into a lane total. A price is one left-to-right span, so a right-to-left page keeps its digits in order.
How do the closing rules work?
refusalOf returns a reason when a listing leaves Closed or reaches it from anywhere but Offer. The drop, the keyboard steps and the menu all ask it, and the status line names the listing.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the card's title. Press Space or Enter to pick it up, then ArrowUp and ArrowDown to change its place, ArrowLeft and ArrowRight to go to the neighbouring column (the arrows swap in right-to-left languages), Home and End for the first and last place, Space or Enter to drop it and Escape to put it back. Each step is announced in the status line. The card's "More actions" menu offers a "Move to" choice for every column too, which is the route for a single pointer and for touch.
What stays in the demo, and how do I save the moves?
Everything: price cuts and moves live in the component's state, and a reload or Reset restores the pipeline. To save for real, call your API from put and from the price handler. The addresses and prices are made up.
How does it look on a phone?
The columns scroll sideways in one named region with the next column showing, and each column scrolls up and down inside the board's fixed height, so the page never jumps. The price and the cut button share one row. Touch drags from the grip only, so the rest of a card still scrolls the board; the menu moves a card with a single tap.