Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Time-Boxed Discussion Comments Block for Solid

A design critique in three timed phases, Silent review, Open discussion and Actions, where Start next phase closes the previous one, hidden silent notes open up and posting works only in the current phase.

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

Run a critique in rounds that end, with this time-boxed discussion for Solid with Ark UI. A compact header names the session in Turnbrook, a tool for workshop rounds, and holds a Facilitator view Switch. The frame opens with three phases as Steps on shared hairlines, each with its allotted minutes on a still Progress bar (10, 20 and 10 of 40; nothing ticks): Silent review, Open discussion and Actions. Under it the current phase is named with one sentence, and the one Shine Button, Start next phase, closes the previous phase (a lock and the word Closed) and opens the next. During Silent review each note is visible only to its author, and the list says how many are hidden until Open discussion; they appear when that phase starts. The composer is a Textarea that posts into the current phase only. It is built from Steps, Switch, Progress, Textarea, Shine Button, Badge and Guides, with CSS only. For design critiques, retros, workshops and any meeting that moves through stages together.

FAQ

How do I change the phases and the notes?

Edit PHASES (each phase has a title, its minutes, a sentence and a placeholder for the box) and START (the notes, each with the index of the phase it was written in, phase). TOTAL is the length of the session, which sets the width of each phase's bar. Which notes you may read is one function, readableOf: your own silent notes, and everything from a phase once Open discussion has started.

What does Facilitator view do?

It shows Start next phase. With it off, the same cell says the facilitator starts the next phase, so nothing moves. In a real app this is a permission, not a switch: the server must refuse a phase change from anyone but the facilitator, and send the change to everyone in the room. On the last phase the button stays on screen, marked as the last phase.

Are silent notes really hidden?

Here the hidden notes are not drawn at all; the page only counts them. They are still in the page's data, so this is a demo of the rule, not a privacy feature. In your app the server must not send other people's silent notes until the phase opens.

What stays local?

Everything: nothing is sent, notes you post go into a list in the page, and the status line says so. The minutes are labels, not a clock, so no phase ends by itself; add a timer on the server if you want phases to close on time, and keep a manual override for the facilitator.

Is it accessible?

The phases are a labelled list; the current one is named in the heading under it, closed ones carry a lock and the word Closed, and the allotted minutes are written as text beside each bar. The bars are decorative. Posting, starting a phase and flipping the Facilitator view are each announced in the polite status line, and the notes are a labelled scroll region you can reach with Tab.

How does it look on a phone?

The three phases stack as three cells, one under the other, each with its number, its state and its bar. Start next phase fills the width under the phase heading, and the notes keep their own scrolling region.