shadcn.io is not affiliated with official shadcn/ui
Notes Stepper Block for Ark UI
A theatre production schedule of five stages as ruled rows, each with a note count and a thread of dated notes, over a field that adds a note, updates the count and keeps focus in the field.
Installation
Overview
Keep the talk with the thing it is about, with this stepper with notes for React with Ark UI. A plus-marked frame holds a read-only Steps rail drawn as ruled rows: the five stages of an autumn production (Read-through, Blocking, Tech, Dress and Opening), each with its dates, a speech-bubble glyph and how many notes it holds. Every row is a Collapsible and one is always open, so the page never changes height. Its thread shows each note as an initials circle, a name, a fixed date such as "12 Sep" and the text; under it an "Add a note" Textarea and an Add note button append one, the row's count and the heading row's total follow, and focus stays in the field for the next. "Mark stage done" is the block's one Shine Button. A stage with no notes shows an Empty state. For productions, projects, audits and reviews.
FAQ
Where do a note's name and date come from?
From data: each note has a person id, an ISO date and its text, and the name and initials are looked up from the people list. New notes are posted as the signed-in person (Greta Voll in the demo) and dated with a fixed AS_OF, 16 Sep, so the block reads the same whenever you open it. Dates are shown as day and month in a time element.
What happens when I add a note?
It is added to the end of the open stage's thread, the thread scrolls to it, the count on the row and the total are recalculated from the list, and the status line says so ("Note added to Blocking: 3 notes"). Focus stays in the field, which is cleared. An empty note is refused with a line asking you to write it first.
Why can I not close the open row?
Opening another row closes the first, and the open one stays open. All the threads are the same height, so choosing a stage never moves the rows below or the button. The thread scrolls inside its box when it grows past it.
How does the keyboard work?
Tab goes through each row's header, and Enter or Space opens it. Inside the open row the thread is a focusable scroll region, then the field and the Add note button. Closed rows are taken out of the tab order.