Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Collapsible examples · Standard

Collapsible with Icon for React

A Show more information trigger with a plus icon that reveals two more paragraphs.

Framework
UI library

A text link that reveals more. Show more information leads with a plus that turns into a cross when two extra paragraphs open below it, and the label underlines on hover. Use it for optional details inside an article or a form.

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

How is Show more information built?

CollapsibleTrigger with flex items-center gap-2 font-medium text-sm, holding PlusIcon and the label. self-start keeps the trigger as wide as its text.

What spaces the trigger and the paragraphs?

Collapsible is a flex flex-col gap-2 column, which separates the trigger from the content. CollapsibleContent is a column with gap-2 too, which separates the two paragraphs.

Does Plus change when the text opens?

Yes, it turns 45 degrees into a cross. The trigger has the group class and sets aria-expanded while open, so group-aria-expanded:rotate-45 on PlusIcon turns it, eased by transition-transform duration-200.

Where does the underline come from?

hover:underline on the trigger. It underlines the label, a hint that the text is clickable.

How do I start the extra paragraphs visible?

Set defaultOpen on Collapsible.

They start hidden.

How do I toggle it from the keyboard?

Tab reaches the trigger, a button named Show more information, and Space or Enter shows or hides the paragraphs.

All 23 collapsible examples