Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Collapsible examples · Card

Card with Icon Header Collapsible for React

A card whose header has an icon tile, a title and a hint line, and expands to more details.

Framework
UI library

A card header with more to say than a title. An icon tile, the title Additional Information and a muted Click to expand line make up the trigger, and the plus in the tile turns into a cross while the card is open. Use it for optional details, help sections and settings groups.

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 the header laid out?

The trigger is flex items-center gap-3 p-4. First comes a size-8 tile with rounded-md bg-primary/10 holding the plus, then a flex-1 column with the title and the hint line.

What does the trigger announce?

Its text: Additional Information Click to expand. The plus is aria-hidden, so it adds nothing.

Why does the icon box sit in the middle of the two lines?

items-center on the trigger centers the tile against the two-line text block. Use items-start to line it up with the title instead.

How do I swap the plus icon?

Replace PlusIcon with another Lucide icon and keep size-4 text-primary. Drop group-aria-expanded:rotate-45 if the new icon shouldn't turn when the card opens.

Can I remove Click to expand?

Yes. Delete the second line and the title alone names the trigger. The tile stays centered beside it.

How do I start this card open?

Set defaultOpen on Collapsible.

The card starts closed.

All 23 collapsible examples