shadcn.io is not affiliated with official shadcn/ui
Deal Flow Kanban Block for Ark UI
A four-stage investor deal board of eleven compact cards with asks added up per stage in cents, a hover and focus peek for terms and valuation, and a rule that a deal closes only from Negotiating.
Installation
Overview
Watch a fund's rounds move from first look to close with this deal board for React with Ark UI. A hairline frame with a plus mark on each corner holds four columns that share their lines: Pipeline, Evaluating, Negotiating and Closed. Each of the eleven deals is an ultra-compact card with the company, its sector in an outline Badge, the round and the amount asked; every head adds up the asks in whole cents (the Closed head adds up what is committed) and the sentence under the heading is worked out from the cards. Hovering, focusing or tapping a company opens a Hover Card peek with the sector, the valuation, the lead partner, the expected close counted in days from a fixed date and the key terms; Escape closes it, and moving a card never needs it. One rule keeps the funnel honest: a deal closes only from Negotiating, and the refusal names the stage to go through. A card moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu; a polite status line in the foot reports each move and Reset restores the desk. The frame is ruled by Guides. On a phone the columns scroll sideways in one named region. For deal desks, investor pipelines and any staged funnel with amounts.
FAQ
How do I fill it with my own deals?
Edit COLUMNS and START. A deal has an id, the column it starts in, a title, a sector, a round, an ask and a valuation in cents, a partner, the terms and a close date as an ISO string. Amounts are integer cents and are formatted by millionsOf, so a total never picks up a rounding error from floating point.
How does the peek open without a mouse?
It opens on hover, on keyboard focus and on a tap, closes on blur and on Escape, and the company name is a real button, so Tab reaches it and the card is announced. A small handler adds focus, tap and Escape on top of the library's hover behaviour.
Why can't I drop a deal straight onto Closed?
refusalOf allows Closed only from Negotiating, so a deal that skips the term-sheet stage is refused with the stage to go through. Every route uses it: the pointer, the keyboard and the menu. Moving a deal out of Closed is always allowed.
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. Space or Enter picks it up, ArrowUp and ArrowDown change its place, ArrowLeft and ArrowRight go to the neighbouring column (they swap in right-to-left languages), Home and End jump to the top and bottom, Space drops it and Escape puts it back. Each step is announced in the status line.
Is there a way to move without dragging?
Yes: the menu at the end of each card lists the columns with the current one ticked, so one click moves the card, focus lands on it in its new place and the status line says so. This is the route for a single pointer and for touch, and it obeys the same rule as dragging.
What stays in the demo?
Everything. Moves live in the component's state, nothing is saved, signed or sent, and a reload or Reset brings back the starting desk. The fund, the companies and the figures are made up and are not advice. To keep a desk, call your API from put, the one function every finished move goes through.