shadcn.io is not affiliated with official shadcn/ui
Pipeline Setup Onboarding Block for Radix UI
A setup panel where four sales stages are renamed in place, moved with buttons, added up to seven and removed with undo, beside a drawn board that mirrors the order.
Installation
Overview
Let a new user name the stages a deal moves through, in order, with this pipeline step for React with Radix UI. It is a setup panel of Closehurst, a sales pipeline tool, ruled by Guides. Four stages (Lead, Qualified, Proposal and Closed) are rows: a name you can edit in place with an Editable, a count of the deals in it, and Move up, Move down and Remove buttons, so reordering needs no dragging and works from the keyboard. The last stage is fixed: it cannot move or go, and Add stage puts a new one just before it, up to seven. Removing a stage hands its deals to the next one, and Undo takes back any step. From the large breakpoint a drawn board sits at the start and mirrors the order live with a bar and a deal count per stage; on a phone a one-row chain above the list stands in for it. Save pipeline is the one Shine Button, quiet until something changed, with Discard beside it.
FAQ
How does reordering work without dragging?
Each row has Move up and Move down buttons that swap the stage with its neighbour. Move up is quiet on the first stage and Move down on the one before the last, and pressing a quiet one says why instead of doing nothing. After a move, focus stays on the button you pressed (found again by a data-focus attribute), so you can press it again to keep moving the same stage.
What does it refuse?
An empty name, a name another stage already has (capitals aside), more than seven stages, fewer than two, and moving or removing the last stage. Each is said in the status line and the stage keeps its old name where it was a rename. Names stop at 24 characters.
How does Undo work?
Every add, rename, move and remove keeps the list as it was. Undo, which is always on the screen and quiet while there is nothing to undo, puts the last one back, and the status says what it undid (“Undid removing Qualified.”). Removing a stage also moves its deals to the next stage, so undoing it gives them back.
What stays local in the demo, and how do I wire it?
Everything. The stages and their deal counts are typed in the file (the counts are examples), and Save pipeline only says it was saved in this demo. In your app save the ordered list where submit says so and move the real deals when a stage is removed.
How does it work with the keyboard?
Tab reaches each row's pencil, which opens the name for editing: Enter keeps the new name and Escape puts the old one back. The three buttons follow in the tab order, each named for its stage (“Move Proposal up”). The list itself is a plain list and its height is held, so adding a stage does not move Save.
How does it look on a phone?
The drawn board is dropped and the chain of names sits above the list as one row of words with arrows (the arrows turn in a right-to-left layout). Each row wraps so its buttons can sit under the name, and the foot pins to the bottom of the screen with Save pipeline and Discard side by side.