shadcn.io is not affiliated with official shadcn/ui
Two Truths And A Lie Team Block for React
A two-truths-and-a-lie quiz about one person: three statements as cells in a framed card, each with a drawn mark; pick the false one, press Check and each cell answers True or False.
Installation
Overview
A getting-to-know-you section for React with Base UI, for Leadbury, a plumbing marketplace. A centred header says whose statements these are and how many are true. Under it a framed card, its corners marked with +, holds the person (an initials avatar, a name, a role) and three statements as three cells side by side, one above the other on a phone, each with a small drawn mark in a tile. Pick the one you think is false and press Check: every cell reveals a word, True or False, with a tick or a cross, the false one's tile drawn solid, and a status line says whether you found it. Choosing another statement hides the answers again. Nothing is sent anywhere. It's built from Avatar, Button and Guides, with CSS transitions and your theme's tokens for every colour. The person and her statements are made up for the example.
FAQ
How do I change the statements and the person?
Edit FACTS and PERSON at the top of the file. A fact is an id, its text and honest (false for the lie); the header's "2 of 3 statements are true" is counted from them, and the words that appear after Check come from the same flag. Give each id a mark in MarkOf. Keep exactly one false statement: the status line says whether the pick was it.
How does it work with a keyboard and a screen reader?
The three cells are native radio buttons in a group named after the question, so Tab moves into the group, the arrow keys move between statements and Space picks one. Check is a real button that waits for a pick; the status line is a polite live region that is present from the start and reads the result once after Check. The answer words are text in the cell, so they are read with the statement.
Does it rely on colour?
No. The result is a word (True or False), a tick or a cross and a solid tile on the false one, all in the theme's foreground; the picked cell is a tint with a line along its foot. Nothing is green or red.
Is anything sent or remembered?
No. The pick and the result live in the page's state only, and a reload starts over. There is no score and no server.
Related
- Pro
Single Question Interview Team
Culture and valuesOne interview read one question at a time: the person and the title in a first column, and in the second a counter, a row of ticks, the question set large, its answer and Previous and Next buttons.
- Pro
Rapid Fire Interview Team
Culture and valuesRapid-fire answers from five people at a meal-prep company: underline tabs, one per person, and under the chosen one a definition list of the same four questions, so you can read down one person or compare across.
- Pro
Pet Census Team
Interests and clubsThe pets of a pet-sitting network: a census of dogs, cats and everything else as counted bars, a framed pet of the week and a two-column roster with a drawn mark, a breed and an owner for each.
- Pro
Shuffle Pairs Coffee Match Team
Culture and valuesThis week's coffee pairs for a team-lunch app: three pairs of six people in cells with overshoot lines, a conversation starter each, and one Shine Button that moves to the next round of a fixed rota, never at random.
- Pro
Kudos Wall Team
RecognitionTwelve kudos notes in hairline cells with a Thanks, Shipped and Helped picker that dims the rest, and a cheer button on each note that adds one to its count and takes it back.
- Pro
Split Avatar Grid Hero
Logos and social proofA compact split team hero: a headline, a Shine Button, a second action and a line of team facts beside a two-by-two grid of large avatars with names and roles in cells that share hairlines.