shadcn.io is not affiliated with official shadcn/ui
Book Club Chat Block for React
A book club thread with a spoiler gate: set your chapter and messages about later chapters stay hidden behind a Show button, with progress, a club count and discussion prompt cards.
Installation
Overview
Let a club talk about a book without spoiling it, with this book club chat for React with Base UI. A hairline frame with a plus mark on each corner holds a wide window of fixed height for Pagebourne, a book club app: the club's thread in flat Message rows, and beside it the book with a drawn cover, a Select for "I'm up to chapter", a Progress bar and how many members have reached the club's chapter. Every message is tagged with its chapter, and one about a later chapter is held behind "Spoiler for chapter 9" with a Show button; its text is not in the page until you show it. Two discussion prompt cards have "Answer this prompt", which quotes the prompt into the composer. The composer's Shine Button, the only colored control, sends your message, tagged with your chapter. It's the starting point for a reading group, a course discussion or any thread where progress decides what you may see.
FAQ
What stays in the page, and how do I make it real?
Everything. Members, chapters and messages are typed, replies come from a short script, and the club count is worked out from typed chapters. Nothing is sent. To wire it for real, store the chapter with each message, return only the messages at or below the reader's chapter and let a Show request fetch the rest.
How does the spoiler gate work?
A message with a chapter above yours is drawn as a dashed row, Spoiler for chapter N, with a Show button. Show reveals that message for this visit and says so in the status line. Change your chapter and the gate follows at once: raise it to the message's chapter and it appears as a normal message, lower it and it hides again unless you showed it.
Where does the members-at-chapter count come from?
From the typed list of members' chapters, counting those at or past the club's chapter, plus you if your chapter reaches it. Change your chapter and the number moves.