shadcn.io is not affiliated with official shadcn/ui
Collapsible Entries Timeline Block for React Aria
A review pass over eight dated entries from a lease history, each folded to a two-line summary on a numbered rail, with a read count and bar, and a Sign off button that stays disabled until every entry has been opened.
Installation
Overview
Make sure everything was read before it is signed with these collapsible entries for React with React Aria. It is written for Readthrough, a fictional due-diligence reader. A hairline frame with a plus mark on each corner holds a progress band, a numbered rail and a sign-off foot. Eight dated entries from the history of a warehouse lease are each folded to a title, a date and a two-line summary; opening one with its Collapsible trigger shows the full text and marks it Read, with a check on its node and the word in the row. The band over the rail counts "5 of 8 read" and draws it as a bar. The one primary, a Shine Button "Sign off the review", is aria-disabled until every entry is read, and the status line says which are still unread ("Still unread: 2, 5, 7"). Pressing it once all are read records the sign-off in this tab and says nothing was sent. For reviews, checklists, terms and any record that must be seen before it is accepted. The text is example data.
FAQ
How do I change the entries?
Edit ENTRIES at the top of the file. Each has an id, an ISO day on, a title, a summary of two lines at most and a body. The count, the bar, the numbers on the nodes and the unread list in the status line are derived from the list and from which ids have been opened.
Why can I press the button before everything is read?
You can press it because it is aria-disabled and not disabled: it stays in the tab order and says what is missing instead of being silent. Until every entry is read it answers with the unread numbers and does nothing else. Once all eight are read it records the sign-off.
When does an entry count as read?
The moment it is opened. The page cannot tell whether anyone read the words, so for a real review you might count an entry as read after a delay or after a scroll to its end. Change fold to apply that rule; the count, the bar and the gate follow.
What stays in the page?
The open entries, which are read and whether the review is signed. Nothing is saved or sent. "Start again" resets all three. To wire it for real, send the sign-off together with the list of read ids to your server and keep the gate on the server as well.