shadcn.io is not affiliated with official shadcn/ui
Language Learning Chat Block for Solid
A narrow Portuguese lesson thread with a vocabulary card: a word with a hidden translation, stressed-syllable chips and a box where you type it back.
Installation
Overview
Show a vocabulary lesson inside a chat with this language learning chat for Solid with Ark UI. A narrow framed window of fixed height holds the thread between you and Ines Valadares, a Portuguese teacher at Falaford, with "words learned" counted in the top bar. She posts one card at a time: the word large, a "Show translation" Toggle that reveals its meaning and an example, the syllables as chips with the stressed one filled (the card says there is no audio in this demo) and a "Say it back" Input where you type the word. Check ignores case and accents: Right posts your word and brings the next card, and Close marks the letters that differ. 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 language app, a course chat or any lesson delivered a card at a time.
FAQ
What stays in the page, and how do I make it real?
Everything. The three words, their syllables and their examples are typed in WORDS, the replies to other messages come from a short typed script, and the check is a comparison in this file. Nothing is sent and no model runs, as the line under the composer says. To make it real, send the typed answer to your lesson service in check, and append the teacher's next card to the same list when it arrives.
How does the check compare what I typed?
Both words are folded: lower case, accents removed and spaces trimmed. If they match, the answer is Right, so "Obrigada" and "obrigada" and even "obrigáda" count. If not, it is Close, and the word is shown with the letters that differ at their positions in bold and underlined, so the difference is not told by color. An empty box asks you to type the word first.
How are the words learned counted?
The top bar shows the words you knew before today plus the cards you have answered Right, worked out from the results and never stored twice. Getting the same card right again is not possible: the Check button is disabled once it is Right.
Is there audio?
No. The syllables and the stressed one are typed data, and the card says "No audio in this demo". To add it, play your recording from the same row and keep the chips as the visual.
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 stressed syllable is filled and also has a hidden "(stressed)" after it, the result is words as well as shapes, and the Portuguese text is marked with its language so a screen reader pronounces it.