Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Team blocks

Pro

Two Truths And A Lie Team Block for Radix UI

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.

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

A getting-to-know-you section for React with Radix 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.

How does it fit on a phone?

Below md the cells stack with a hairline between them and the card keeps its inset from the rails. Check and its status line stay at the foot of the card.

What are the drawn marks?

Line icons from the icon set the block already uses (a drop, a moon, a wrench) in a small tile. They are decoration and hidden from assistive technology; the statement says everything.

All 126 team blocks