Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Collapsible examples · Faq

FAQ Card Style Collapsible for React

An FAQ question in a card with a hover tint and a chevron that turns when the answer opens.

Framework
UI library

One FAQ question in its own card. The trigger, wrapped in a heading, tints on hover and has a chevron that turns over when the answer opens under a divider. Use it on pricing and help pages where each question stands on its own.

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

Which classes make the card?

Collapsible has rounded-lg border bg-card shadow-sm and overflow-hidden, so the hover tint stays inside the rounded corners. CollapsibleContent adds border-t px-4 py-3 above the answer.

What does hover:bg-muted/50 change?

It tints the trigger row with half of the muted color while the pointer is over it, a cue that the whole row is clickable.

Why does the trigger set text-start?

Buttons center their text by default. text-start lines a long question up with the start edge, and follows the page in right-to-left layouts.

Does the chevron rotate when the answer opens?

Yes. The trigger has the group class and sets aria-expanded while open, so group-aria-expanded:rotate-180 on ChevronDownIcon turns it, eased by transition-transform duration-200.

How do I start this question open?

Set defaultOpen on Collapsible.

It starts closed.

How do I show more questions in this style?

Repeat the card in a flex flex-col gap-2 list. Each Collapsible opens on its own. When several sit in one list and only one should be open at a time, with arrow keys between the headers, use an Accordion.

All 23 collapsible examples