Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Collapsible examples · Faq

FAQ with Badge Collapsible for React

An FAQ question with a Popular badge and a leading chevron that points down when the answer opens.

Framework
UI library

An FAQ question that flags the most-asked ones. A chevron leads the row and turns to point down when the answer opens, and an outline Popular Badge sits after the question. The answer is indented to line up with the question text.

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

Where do the chevron, the question, and Popular sit?

All in the trigger, a flex items-start gap-3 row: the chevron first, then a wrapping group with the question and the badge. The h3 around the trigger makes the question a heading.

Why does the answer use ms-7?

It's the chevron's size-4 plus the gap-3 after it, so the answer starts under the question instead of under the chevron. ms is a logical margin, so it follows right-to-left pages.

Does ChevronRight turn when the answer opens?

Yes, a quarter turn to point down. The trigger has the group class and sets aria-expanded while open, so group-aria-expanded:rotate-90 on ChevronRightIcon turns it, eased by transition-transform duration-200.

Is Popular part of the button name?

Yes. The badge is inside the trigger, so the name is the question followed by Popular. The chevron is aria-hidden.

How do I change the Popular badge?

Change its text or variant; this one is outline. Leave it out on questions that aren't popular.

How do I start this question open?

Set defaultOpen on Collapsible.

It starts closed.

All 23 collapsible examples