Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Collapsible examples · Card

Card with Badge Collapsible for React

A card whose Premium Features header carries a New badge and expands to a short description.

Framework
UI library

A card header that flags what's new. Premium Features sits beside a secondary New Badge, with a chevron at the end that turns over when the card opens to a short description. Use it to point out a new or changed section without opening it for everyone.

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

Where does the New badge sit?

Inside the trigger, in a flex items-center gap-2 group with the Premium Features title. The trigger's justify-between pushes the chevron to the end of the row.

Does New get announced with the heading?

Yes. The badge is inside the trigger, so the button's name is Premium Features New. Move the badge out of the trigger if it shouldn't be part of the name.

How do I change the New badge?

Change its text or variant: this one is secondary. Keep it short so the header stays on one line.

Can I put another badge on this header?

Yes. Add it to the same group as the title, and the gap-2 spaces it. Every badge inside the trigger becomes part of its name.

Does this chevron rotate?

Yes. The trigger has the group class and sets aria-expanded while open, so group-aria-expanded:rotate-180 on ChevronDownIcon turns it, eased by transition-transform duration-200.

How do I start the Premium Features card open?

Set defaultOpen on Collapsible.

The card starts closed.

All 23 collapsible examples