Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Collapsible examples · Faq

Numbered FAQ Collapsible for React

An FAQ question led by a round number badge, with the answer indented under the question.

Framework
UI library

An FAQ that reads in order. A round number badge leads each question, the question is a heading that wraps the trigger, and the answer is indented under the question text. Use it for steps, policies or questions that build on each other.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How is the number drawn?

A span with size-6 rounded-full bg-primary/10 and font-semibold text-primary text-xs, centered with flex. shrink-0 keeps it round when the question wraps.

Why does the answer use ms-10?

It's the badge's size-6 plus the gap-4 after it, so the answer lines up with the question text. ms follows the page direction.

Does the number get announced with the question?

Yes. The number is inside the trigger, so the name is 1 followed by the question. Move it out of the trigger if you don't want it read.

What does the heading around the trigger do?

The h3 wraps CollapsibleTrigger, so the question is a heading in the page outline and the trigger inside it is still the button. Pick the heading level that fits your page.

How do I number the next question?

Repeat the block and change the number and the text. Each item has border-b pb-4, so a stack of them is divided by lines.

How do I start question 1 open?

Set defaultOpen on Collapsible.

It starts closed.

All 23 collapsible examples