Skip to content

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

Free

Card with Badge Collapsible for React

A Premium Features card with a New badge in the header and a short description when it opens.

Premium Features sits next to a New badge, with a chevron at the end of the header. Opening the card shows one short paragraph about the premium plan.

Use it to flag a section as new without leaving it open. If the badge should stand alone, put a Badge outside the header. In React, Base UI does not remember that the card was opened.

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="w-full max-w-lg rounded-lg border bg-card text-card-foreground shadow-sm">
  <CollapsibleTrigger className="group flex w-full items-center justify-between p-4">
    <span className="flex items-center gap-2">
      <span className="font-medium">Premium Features</span>
      <Badge variant="secondary">New</Badge>
    </span>
    <ChevronDownIcon
      aria-hidden="true"
      className="size-4 transition-transform duration-200 group-aria-expanded:rotate-180"
    />
  </CollapsibleTrigger>
  <CollapsibleContent>
    <div className="border-t p-4 text-muted-foreground text-sm">
      Unlock advanced features with our premium plan including priority
      support, advanced analytics, and custom integrations.
    </div>
  </CollapsibleContent>
</Collapsible>

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.

API Reference

Collapsible

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

Badge

Sets variant="secondary". The rest is on the Badge page.

All 23 collapsible examples