shadcn.io is not affiliated with official shadcn/ui
Vertical Tabs Lessons Learned Block for React Aria
A lessons-learned section for a retrospectives tool: a vertical tab list of six post-mortems with the year each happened, and the open one as what happened, what we learned and what changed.
Installation
Overview
A lessons-learned section for React with React Aria. A compact header sits over a master and detail: at the start a vertical list of six post-mortems, each a title with, in its margin, how long into the company's life it happened ("Year 2", never a calendar year); behind a divider that meets the band's top rule with a plus, the open lesson as a title with a badge and three labelled rows: what happened, what we learned and what changed. Every lesson is sized by an unseen copy, so choosing one never moves the page. On a phone the list becomes a row of chips that scrolls sideways above the lesson. It's built from Guides, Tabs and Badge, with CSS transitions for the entrance and your theme's tokens for every colour. For an about page, a company handbook or a "how we got here" page that admits mistakes in a form people can scan. The company and its lessons are invented for the example.
FAQ
How do I change the lessons?
Edit LESSONS at the top of the file: each has a title, a when label and the three texts, situation, learned and changed. A new lesson becomes a new row in the list and a new panel with no other change. Keep when relative ("Year 3", "Since our first customer") so the page doesn't age.
How do the tabs work with a keyboard?
The list is a vertical tab list: the Up and Down arrow keys move between the lessons, Home and End jump to the first and last, and Tab moves into the open lesson. The open one is marked by a bar at the start of its row and by the row's selected state, so it's not shown by colour alone.
Why doesn't the page move when I pick a lesson?
The lessons differ in length. An unseen, inert copy of every panel sits in the same grid cell as the open one, so the cell keeps the height of the tallest, and the hidden copies are out of the accessibility tree and the tab order.
How are the three rows built?
As a definition list: "What happened", "What we learned" and "What changed" are terms, and each text is its description, so a screen reader announces them as pairs. The rows are separated by hairlines drawn by the list itself.
How does it fit on a phone?
The list becomes a single row of chips that scrolls sideways inside its own band, with the open chip filled in your foreground colour; the year moves out of the chips and stays in the lesson's badge. The lesson sits under the chips. Nothing else scrolls sideways at 320 pixels.