Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Chat blocks

Pro

Trivia Night Chat Block for Vue

A pub-quiz thread with a Teams pane: your team locks in one answer per round, the other teams' answers and 10-point scores appear, and the board re-ranks to final scores.

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

Play a pub quiz in the chat, with this trivia night chat for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Triviahall, a pub quiz: a "Teams" pane at the start and the host's thread beside it. The pane shows "Round 2 of 3" with a Progress bar and the three teams ranked 1st to 3rd with their points, yours marked "You". The host posts one question card per round with four options; your team locks in one answer, which spends the buttons, then the other two teams' typed answers appear, the correct one is marked, each team that got it takes 10 points and the board re-ranks. After the third round a "Final scores" card names the winner or the tie. The composer's Shine Button, the only colored control, takes words, but answers are the card's buttons. The frame is ruled by Guides, and everything moves with CSS only. For a quiz night, a team game or any thread with rounds and a leaderboard.

FAQ

How are the scores and ranks worked out?

From one list: your team's pick per round and the other teams' typed picks. Each correct pick is worth 10 points, the board sorts by points and breaks ties by the order of the list, and the pane and the final card read the same function.

Can a team answer twice?

No. A team answers once per question: pressing an option spends the four buttons and the card says "Locked in". There is no clock, so there is nothing to race.

How do I add rounds or teams?

Add an entry to QUESTIONS with its options, the correct index and the other teams' typed picks, or a name to TEAMS. The round count, the progress bar and the final card follow.

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

Everything. The host is a script with short typing pauses and the other teams' answers are typed. To wire it for real, send your team's pick from lock to your server and take the reveal and the scores from the response.

Is it usable with a keyboard and a screen reader?

Options are native buttons with a pressed state, the reveal is a list with a glyph and a word per team, ranks are words and the round line is announced politely. The log is a focusable region announced as a log.

How does it look on a phone?

A toggle under the top bar switches between the chat and the teams; only one shows at a time and the window keeps its height. From md up, the Teams pane sits at the start of the thread.

All 200 chat blocks