Skip to content

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

Free

Inline Trigger Collapsible for Ark UI

A question about using the project, with an up-down chevron, that opens to a one-line answer.

The question Can I use this in my project? fills the row, with an up-down chevron at the end. The answer is one short line.

Use it for a short FAQ or a terms line. A longer answer reads better in an Accordion. In React, Ark UI toggles this row 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

Anatomy

Collapsible anatomy: root, trigger, indicator, content

Usage

<Collapsible className="flex w-full max-w-lg flex-col gap-2">
  <CollapsibleTrigger className="flex w-full items-center justify-between gap-4 text-start font-medium text-sm">
    Can I use this in my project?
    <ChevronsUpDownIcon aria-hidden="true" className="size-4 shrink-0" />
  </CollapsibleTrigger>
  <CollapsibleContent className="text-muted-foreground text-sm">
    Yes. Free to use for personal and commercial projects. No attribution
    required.
  </CollapsibleContent>
</Collapsible>

FAQ

How does the question line up with the icon?

The trigger is flex w-full items-center justify-between gap-4: the question at the start, the icon at the end. shrink-0 keeps the icon its size when the question wraps.

Does ChevronsUpDown rotate?

No. It already points both ways, so it reads right open or closed. It is aria-hidden; the question names the button.

What separates the question and the answer?

Collapsible is a flex flex-col gap-2 column, so the answer sits a step below the question. The answer is text-muted-foreground text-sm.

How do I start this answer open?

Set defaultOpen on Collapsible.

It starts closed.

How do I toggle it from the keyboard?

Tab reaches the trigger, a button named by the question, and Space or Enter toggles the answer.

How do I add another question in this layout?

Repeat the Collapsible with new text, in a column with a gap. 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.

API Reference

Collapsible

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

All 23 collapsible examples