shadcn.io is not affiliated with official shadcn/ui
Virtual Classroom Chat Block for React
A class thread with a teacher and three students and a Questions pane sorted by votes, an upvote toggle on each that counts yours once, an Answered word once the teacher replies, and a checkbox under the composer that adds your message to the list.
Installation
Overview
Run a class as a conversation, with this virtual classroom chat for React with Base UI. A hairline frame holds a window of fixed height for Chalkline, an online classroom: a Year 9 Science thread with a teacher, Geraldine Pruitt, and three students, and a Questions pane at the end sorted by votes. Each question has an upvote Toggle that counts your vote once and the word Answered once the teacher's reply has covered it. A Checkbox under the composer, Post to the question list, adds the message you send to the list as well. The composer's Shine Button is the only colored control. On a phone a Chat and Questions switch shows one pane at a time.
FAQ
What stays in the page, and how do I make it real?
Everything. The class, the questions and the replies come from a typed script keyed on words in your message, some spoken by the teacher and some by a student. Votes and answers live in state. Nothing is sent and no model runs. To wire it for real, send the question from send to your classroom service and mark answers from the teacher's actions.
How are the questions sorted?
By votes, derived on every render: the typed base votes plus one if you voted, with ties in the order asked. Voting moves the question and keeps focus on its toggle. The pane is a list with a fixed height that scrolls.
When does a question become Answered?
When the teacher's typed reply covers it. Asking about the quiz, a fair test or the calculator gets a teacher reply that marks that question, and the pane then shows a check glyph and the word Answered under it.