Back to components
ComponentBoardFree
Retro Board React component
A cycle retrospective with reflection columns, a limited voting round and actionable follow-ups with completion tracking.
About the Retro Board component
A cycle retrospective with reflection columns, a limited voting round and actionable follow-ups with completion tracking.
When to use it
Facilitate a keep, improve and try retrospective.
Turn a reflection into a small set of follow-up actions.
Installation
Add the Retro Board component to your project with the shadcn CLI. It lands in components/retro-board.tsx as plain React + Tailwind CSS source you own and can edit.
Install
Copied!
npx shadcn@latest add @reactframe/retro-boardOr copy the source by hand and install its dependencies:
Install
Copied!
npm install lucide-react clsx tailwind-mergeProps
<RetroBoard /> accepts 6 props, all optional.
| Prop | Type | Default |
|---|---|---|
| title | string | "A little better, every cycle." |
| theme | "dark" | "light" | "dark" |
| initialNotes | { id: string; column: "keep" | "improve" | "try"; text: string; author: string; votes: number; action?: boolean; done?: boolean }[] | initial |
| onNotesChange | (notes: RetroNote[]) => void | — |
| voteLimit | number | 3 |
| className | string | — |
- titlestringDefault: "A little better, every cycle."
- theme"dark" | "light"Default: "dark"
- initialNotes{ id: string; column: "keep" | "improve" | "try"; text: string; author: string; votes: number; action?: boolean; done?: boolean }[]Default: initial
- onNotesChange(notes: RetroNote[]) => void
- voteLimitnumberDefault: 3
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Retro Board FAQ
- Does voting require a server?
- Votes and actions live in local component state. voteLimit limits the current session’s votes; a user can remove a vote to recover their budget. Use onNotesChange with your own service for persistence and server-side voting rules. Hiding notes is a visual facilitation feature, not access control.
