shadcn.io is not affiliated with official shadcn/ui
Startup Pipeline Kanban Block for Ark UI
An idea pipeline of eleven products in Idea, Validate, Build and Launch, each with a three-bar confidence glyph and word worked out from its validated signals, where a launch needs three.
Installation
Overview
Decide which ideas deserve to ship with this startup pipeline kanban for React with Ark UI. A hairline frame with a plus mark on each corner holds four columns that share their lines (Idea, Validate, Build and Launch) and eleven product ideas. Each card counts the signals that have validated it and reads a confidence from the count: a three-bar glyph and a word, Low for 0 or 1 signals, Medium for 2 and High for 3 or more. "Log a signal" adds one, up to five. An idea can't launch with fewer than three validated signals, and the refusal says how many more it needs. A card moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu with "Move to". The sentence under the heading counts the ideas that have what a launch needs, and a polite status line in the foot reports every move and every signal. The frame is ruled by Guides. On a phone the columns scroll sideways in one named region. For founders, product teams and any pipeline where a launch must be earned.
FAQ
How do I fill it with my own ideas?
Edit COLUMNS, NEEDED, MOST and START. An idea has an id, a title, its validated signals and the column it starts in. The confidence bars, the words and the header sentence are calculated from the signals.
How is the confidence worked out?
Only from the signal count: barsOf returns one bar below two signals, two bars at two and three bars from NEEDED (3) up, and the word follows the bars. The glyph is hidden from assistive technology and the word carries the meaning, so colour is not used. Replace barsOf if your signals are weighted.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the idea'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. A step into Launch with fewer than three signals is refused in the status line and the idea stays where it was. Every step is announced in the status line in the foot.
Is there a way to move without dragging?
Yes: the menu at the end of each card lists every column under "Move to" with the current one ticked, so one choice 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, and how do I save it?
Everything: The moves and the logged signals live in the component's state, nothing is saved or sent, and a reload or Reset brings back the starting board. To save for real, call your API from act (Log a signal) and from put (every finished move), then update the cards from the response. The product, the people and the cards are made up.
How does it look on a phone?
The board is a sideways scroll region with the next column showing, and each column scrolls up and down inside the board's fixed height, so the page never jumps when a card moves. Touch drags from the grip only, so the rest of a card still scrolls the board; the menu is the other way to move a card.