Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Numbered FAQ Collapsible for React

FAQ row number 1, on canceling a subscription, with the answer indented under the question.

A round 1 leads Can I cancel my subscription anytime? The question is a heading, and the answer is indented under the text.

Use it when questions should be read in order. If they are not a sequence, use an Accordion without numbers. In React, Base UI does not number the rows.

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

Anatomy

Collapsible anatomy: root, trigger, indicator, content

Usage

<Collapsible className="w-full max-w-lg border-b pb-4">
  <h3>
    <CollapsibleTrigger className="flex w-full items-start gap-4 text-start font-medium">
      <span className="flex size-6 shrink-0 items-center justify-center rounded-full bg-primary/10 font-semibold text-primary text-xs">
        1
      </span>
      Can I cancel my subscription anytime?
    </CollapsibleTrigger>
  </h3>
  <CollapsibleContent>
    <div className="ms-10 pt-2 text-muted-foreground text-sm">
      Absolutely. You can cancel your subscription at any time from your
      account settings. Your access will continue until the end of your
      billing period.
    </div>
  </CollapsibleContent>
</Collapsible>

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.

API Reference

Collapsible

No extra props in this demo. The rest is on the Collapsible page.

All 23 collapsible examples