shadcn.io is not affiliated with official shadcn/ui
Education Tutor Chat Block for Solid
A tutoring thread with a lesson plan card of tickable topics and a homework card that you mark as submitted, under a lesson 3 of 8 progress line.
Installation
Overview
Show a tutoring session with this education tutor chat for Solid with Ark UI. A framed window of fixed height holds the thread between you and Sam Odukoya, a maths tutor at Lessonridge: the top bar shows "Lesson 3 of 8" with a hairline Progress under it, and the log is a few Message and Bubble rows with two cards from Sam. The lesson plan card lists three topics with a Checkbox each and counts "2 of 3 covered" as you tick; the homework card lists three tasks due Friday and a "Mark as submitted" button that posts your line, shows "Submitted" and gets a typed reply after a Typing Indicator Text. The composer's Shine Button is the only colored control. The frame is ruled by Guides, and everything moves with CSS only. It suits a tutoring service, a course mentor or any thread where a teacher hands out work.
FAQ
What stays in the page, and how do I make it real?
Everything. The ticks, the "Submitted" word and the replies live in this file's state, and the replies come from a short typed script keyed on words such as "fraction", "homework" and "stuck", then a fallback per message and a last line that says it was the last sample reply. Nothing is sent and no model runs, as the line under the composer says. To make it real, send the ticked topics and the submission to your tutoring backend where cover and submit set state, and append the tutor's messages to the same list as they arrive.
How is
It is counted from the three ticks and never typed twice, so ticking the last topic reads "3 of 3 covered" and unticking one takes it back. Each tick also updates the line under the composer, which a screen reader announces politely. Edit TOPICS to change the topics; the count follows.
What does
It posts "Homework submitted." as your message, disables the button, shows a "Submitted" word with a check next to it and starts the tutor's typing line before a typed reply. It does not upload anything. In your app, call your submission endpoint in submit before the message is posted.
Is it usable with a keyboard and a screen reader?
The log is a focusable region announced as a log, so new messages are read out once, and every message starts with a hidden name and time such as "You, 09:42". Delivery is a glyph and a word, never a color. The topics are real checkboxes inside labels, the tasks are an ordered list, and the avatars are hidden from assistive technology because the name is always in text. Progress is named "Lesson 3 of 8".