Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chat blocks

Pro

Study Group Chat Block for React Aria

A study-group thread with a flashcard deck: flip a card, answer Got it or Again, see each friend's answer, and watch the group's count of known cards update.

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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Study together in the thread, with this study group chat for React with React Aria. A hairline frame with a plus mark on each corner holds a window of fixed height for Cramroom, a study-group chat of four: flat Message rows and, between them, flashcard messages from a deck of eight Spanish words. A card shows its front, "Flip" turns it to the meaning (announced politely), and "Got it" or "Again" are yours. Once you answer, each friend's typed answer appears under the buttons ("Ana: Got it") and the deck line under the top bar, "Group knows 2 of 8 cards", with its Progress bar, is worked out again. "Next card" posts the next one and the chat carries on between cards. The composer's Shine Button, the only colored control, posts to the group. The frame is ruled by Guides, and everything moves with CSS only. For a study room, a language class chat or any group that works through a list together.

FAQ

When does the group

When at least three of the four members got it. Your answer and the friends' typed answers feed one function, knownOf, so the deck line and the progress bar always agree, and a card you haven't answered yet doesn't count.

How does the flip work?

Flip swaps the front and the back inside one fixed-height box, so nothing moves, and the box is a polite live region, so a screen reader hears the meaning. Got it and Again stay off until the card is flipped.

How do I change the deck?

Edit CARDS: a front, a back and the three friends' typed answers per card. The count in the deck line follows the length of the list.

What stays in the page, and how do I make it real?

Everything. Cards and answers are state, the friends' answers are typed and their chat replies come from a short script. To wire it for real, send your answer from markCard to your server and show the other members' answers when they arrive.

Is it usable with a keyboard and a screen reader?

Every button is a native button, the friends' answers are a named list with a glyph and a word, and the status line announces each flip and answer. The log is a focusable region announced as a log.

How does it look on a phone?

The same single column: the card takes the width of the log, the deck line keeps its place under the top bar and the window keeps its height, so only the log scrolls.

All 200 chat blocks