shadcn.io is not affiliated with official shadcn/ui
Art Critique Chat Block for Radix UI
An art teacher's thread with a critique card of a drawn landscape plate and four rubric scores in dots, tabs for two rounds that show the change in words, a quote button on each criterion and a Versions pane with a swap toggle.
Installation
Overview
Show a teacher giving feedback on someone's work, with this art critique chat for React with Radix UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Easelhurst, an art class: the top bar names the teacher, Perdita Alderley. The log holds her critique card: a drawn landscape plate in greys, never a photo, and a rubric of four criteria, Composition, Colour, Technique and Originality, each a dot score out of 5 with a one-line typed note. Tabs for Round 1 and Round 2 show each round's scores, and Round 2 adds the change since Round 1 in words, such as "Colour +1". "Ask about this" on a criterion puts a short quote of it in the message box. The Versions pane at the end draws both plates side by side with a Toggle that swaps their sides, and a toggle group swaps Chat and Versions on a phone. The composer's Shine Button, the only colored control, sends typed questions after a Typing Indicator Text. The frame is ruled by Guides, and everything moves with CSS only. It's the starting point for a class critique, a design review thread or any feedback that compares rounds.
FAQ
What stays in the page, and how do I make it real?
Everything. The teacher's replies come from a short typed script keyed on the criteria names and words such as "brush", then one fallback per message and a last line that says it was the last sample reply. The scores, notes and the two plates are typed or drawn in the file, and nothing is sent. To wire it for real, load your rounds into CRITERIA, replace Plate with your own image, and append the teacher's messages to the same list as they arrive.
How are the changes worked out?
deltaOf subtracts the Round 1 score from the Round 2 score and writes it as "+1", "-1" or "No change", and Round 1 has no change to show. The line under the card and in the pane lists only the criteria that moved, so here it reads "Composition +1, Colour +1". Edit a score in the data and every place follows.
What does Ask about this do?
It writes "About Colour in round 2: " in the message box, moves focus there and says so in the status line, so you finish the question and send it. Words such as "colour" or "composition" in your message pick the matching typed reply. Nothing is sent until you press Send.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, and every message starts with a hidden name and time. The tabs are real tabs with arrow keys, the scores are written as "3 of 5" beside the dots, each quote button is named with its criterion, the plates are drawn with titles and described by the text, and the composer's status line is the one live region. State is never shown by color alone.
How does it look on a phone?
The pane would not fit beside the chat, so a Chat and Versions toggle sits under the top bar and shows one at a time. The "2 rounds" badge drops out of the top bar, the card keeps its width inside the log, and the composer keeps its place at the foot. The window keeps its height and only the log and the pane scroll.