shadcn.io is not affiliated with official shadcn/ui
Comparison FAQ Block for Radix UI
A tier-comparison FAQ for a form builder: column heads for Free, Pro and Enterprise over eight questions, each ending in three tick or dash marks and opening to the detail.
Installation
Overview
A comparison FAQ for React with Radix UI. A start-aligned header sits over a band of three column heads (Free, Pro, Enterprise), and eight accordion rows run from rail to rail under it. Each question ends in three marks that line up under the heads: a filled tick where the plan has the feature, a dash where it doesn't, both in your theme's foreground tones, so all three plans are compared at a glance. Open a row for the detail: what each plan gets, in one to three sentences. On a phone the heads and the marks fold into one badge under the question that names the plans that have the feature ("Pro and Enterprise", or "All plans"). The page's rails and top rule come from the Guides spine, so the block lines up with its neighbours in a stack. It's built from Accordion, Badge and Guides, with CSS transitions for the entrance and the chevron. For pricing pages and plan comparisons where visitors ask "does my plan do this?" before they ask what it costs.
FAQ
How do I change the plans and the questions?
Edit TIERS for the column names and QUESTIONS for the rows: each question has an id, the question, its answer and an included array with one true or false per plan, in the order of TIERS. The heads, the marks and the phone badge are all built from those two lists. To add a fourth plan, add its name to TIERS and one more value to each included array; narrow the COLUMN width if the row gets tight.
Is a mark understood without seeing it?
Yes. Each mark carries its meaning in words for a screen reader ("Pro: included", "Free: not included"), so a question's name reads as the question followed by all three plans' answers. The tick and the dash are decoration, and the heads above them are hidden from assistive technology because every mark already names its plan. Nothing relies on colour: a tick is a filled circle, a dash is a line.
What happens on a phone?
Below sm there is no room for three columns, so the heads and the marks are hidden and a single outline badge sits under each question, naming the plans that have the feature: "Enterprise", "Pro and Enterprise" or "All plans". A screen reader hears "Included in" before it. Nothing scrolls sideways at 320 pixels.
Are the closed answers in the page's markup?
No. This Accordion renders an answer only when its row opens.
How does it work with a keyboard?
Each row is a button inside its own h3 under the section's h2; Enter or Space opens and closes it, and it says whether it's expanded.
The Up and Down arrows also move between rows, and Home and End jump to the first and last.
One answer is open at a time.
Why is the chevron drawn by the block, not the Accordion?
The column heads and the marks must line up exactly, so the block hides the Accordion's own chevrons and draws one of a known width at the end of every row. The heads end with a spacer of the same width. It turns over when the row opens, and with reduced motion it flips without turning.