Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Collapsible examples · Standard

Text-only Collapsible for React

A Settings heading with a bracketed expand trigger beside it that reveals three option rows.

Framework
UI library

No icons, no button styles: a Settings heading with a muted [expand] trigger beside it, which reveals three bordered option rows. Use it for minimal layouts and dense settings pages where a quiet control fits better than a button.

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

Does the Settings heading toggle the list?

No. The h4 sits beside the trigger in a flex items-center gap-2 row, and only [expand] toggles the options.

How is the expand control styled?

text-muted-foreground text-sm, with hover:underline and underline-offset-4. It has aria-label="Expand settings", so screen readers hear what it expands rather than the brackets.

How are Option 1, Option 2, and Option 3 drawn?

Each is a div with rounded-md border px-4 py-2 text-sm, from the options list at the top of the file. CollapsibleContent is a flex flex-col gap-2 column.

How do I start the options visible?

Set defaultOpen on Collapsible.

They start hidden.

How do I expand the list from the keyboard?

Tab reaches [expand], and Space or Enter toggles the options. The heading isn't a control.

How do I make the Settings heading toggle the list?

Wrap the trigger in the heading and put the Settings text inside the trigger, so the heading and the cue are one button. Then drop the aria-label, since the visible text names it.

All 23 collapsible examples