shadcn.io is not affiliated with official shadcn/ui
CRM Deals Kanban Block for Ark UI
A three-column sales pipeline of nine deals with a total and a stage-weighted total per column, and a detail pane for the selected deal with its contact, win chance, notes and next action.
Installation
Overview
Work a small-business sales pipeline with this deal board for React with Ark UI. A hairline frame with a plus mark on each corner holds three columns that share their lines, Lead, Qualified and Closed won, beside a detail pane for the selected deal. Each stage has a fixed chance (20, 50 and 100 percent), so a deal's weighted value is its value times its stage's chance in whole cents, and every head and the sentence under the heading show a total and a weighted total worked out from the cards. Pressing a company selects it (the first deal is selected on load) and the pane shows the company, the contact, the value, the stage's chance in a Progress bar, the notes and the next action with a due word counted from a fixed date and a "Mark done" Button. A card moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu, and the pane follows the move; a polite status line in the foot 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 and the pane goes under the board. For small sales teams, pipeline reviews and any board with a selected record.
FAQ
How do I fill it with my own deals?
Edit COLUMNS and START. A stage has an id, a name and a chance in whole percent. A deal has an id, the column it starts in, a title, a contact, a value in cents, notes, a next action with its actionDue date and done flag, and selected on the deal the pane shows first.
Where does the win chance come from?
From the stage, and only from the stage: the chance is a number on each column, shown as a Progress bar in the pane and used for the weighted value, so it is never a score made up for one deal. Moving a deal changes its chance, the column totals and the header sentence in the same update. Replace the fixed numbers with your own conversion rates.
How does the detail pane behave?
It shows the selected deal and follows it when it moves. Pressing a company selects it, and the button has aria-pressed. The next action's due word is counted from AS_OF, a fixed date at the top of the file, so it stays true when the demo is read later; "Mark done" toggles the action and the status line says so. On a phone the pane sits under the board instead of beside it.
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. Selection, done marks and moves live in the component's state, nothing is saved, sent or sold, and a reload or Reset brings back the starting pipeline. The business, the contacts and the figures are made up. To keep changes, call your API from put and from the pane's handlers.