shadcn.io is not affiliated with official shadcn/ui
Sales Overview Kanban Block for Radix UI
A four-lane quarter board of twelve deals with lane totals and a target line that shows the percentage of the quarter target closed, which moves as deals enter or leave Closed.
Installation
Overview
Watch a quarter close with this sales board for React with Radix UI. A hairline frame with a plus mark on each corner holds four lanes that share their lines: Lead, Qualified, Proposal and Closed. Each of the twelve deals is a card with a title, a one-line source and its amount, every lane head counts its deals and totals their value, and beside the heading sits the quarter's target line: a bar and the words "63% of target" worked out from the Closed lane in integer cents, so moving a deal into or out of Closed changes it at once. A deal moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu with "Move to"; a polite status line in the foot reports each move with the lane's new total and Reset restores the quarter. The frame is ruled by Guides. On a phone the lanes scroll sideways in one named region with the next lane showing. For sales reviews, forecast calls and any pipeline measured against a target.
FAQ
How do I fill it with my own deals and target?
Edit COLUMNS, START and TARGET. A deal has an id, the column it starts in, a title, a one-line note and its value in cents (the usd() helper turns dollars into cents). The percentage, the lane totals, the bar and the header sentence are all calculated from the cards, and the amounts are shown by moneyOf, which groups thousands without Intl.
How is the percentage of target worked out?
It adds the amounts, in cents, of the cards in the Closed lane and divides by the target, rounded half up to a whole percent. The bar is capped at the full width but the number is not, so a quarter that beats its target reads "112% of target". Nothing is stored, so a move to Closed changes it in the same render and the status line repeats it for a screen reader.
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 in the lane, ArrowLeft and ArrowRight go to the neighbouring lane (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 lanes 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.
What stays in the demo?
Everything. The moves live in the component's state, nothing is saved or sent, and a reload or Reset brings back the starting board. The product, the deals and the figures are made up. The quarter target is a constant. To keep a board, call your API from put, the one function every finished move goes through, and update the cards from the response.
How does it look on a phone?
The lanes scroll sideways inside the board with the next lane showing, and each lane scrolls up and down within the board's fixed height, so the page does not jump when a card moves. Touch drags from the grip only, so the rest of a card still scrolls; the menu is the other way to move it.
Is any move refused?
No. A deal can go to any lane, including backwards, because a sales review often moves a deal back to Qualified when a proposal stalls. If your process forbids a jump, add the check to refusalOf: return a sentence and the card stays put, the sentence appears in the status line, and focus returns to the card.