Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Retrospective Board Task List Block for Ark UI

A sprint retrospective with Went well, Didn't go well and Actions columns, three votes each with a count of votes to spend, a Sort by votes action, and an owner picker on action cards.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Collect what a sprint taught the team, with this retrospective to-do list block for React with Ark UI. Three columns sit on shared hairlines, Went well, Didn't go well and Actions, each with its own labelled Input and an Add button. Cards in the first two columns carry a Toggle to vote and a count of votes; you have three votes, the footer says how many are still to spend, and once they are gone a Vote button answers "All votes are spent. Take one back first." instead of voting. "Sort by votes" is an outline button in the header: it orders the cards once and leaves them alone while you keep voting. Action cards take an owner from a Native Select. The cards are drawn in plain outlines, and Guides frame the board. For sprint retros, project reviews and any team that wants to turn feedback into owned actions.

FAQ

How do the three votes work?

Each person has BUDGET votes, three here. Pressing Vote on a card marks it as yours and counts it once; pressing it again takes the vote back. The count under a card is the team's typed votes plus yours, and the footer shows "2 votes to spend", or "All votes spent" when you have used them.

Why does sorting only happen on a button?

Cards that move while you are voting make you lose your place, so "Sort by votes" reorders the cards once, most votes first, and keeps equal ones in the order they had. Votes you cast afterwards don't move anything until you press it again.

What can I do with action cards?

Add one in the third column and choose an owner from the select on the card, or leave it unowned. The status line announces the change ("'Cap standup at fifteen minutes' is now owned by Linnea Parekh").

What stays local, and how do I save for real?

The whole board lives in the page: the other people's votes are typed, and nothing is shared or saved, so it resets on reload. In your app write cards and votes from send and vote, keep one vote budget per person on the server, and reveal everyone's votes together if you want a blind vote.

Is it accessible?

Every Vote button is named for its card ("Vote for 'Two stories grew after planning'") and shows Voted when pressed, an empty submit says "Write a card first." and keeps focus, and the owner select is named for its card. A spent budget is explained in words by the status line, not just a dimmed button.

How does it look on a phone?

The three columns stack in order with their add fields, cards keep their full width, and the votes-to-spend line stays in the footer under the last column.