Skip to content

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

Free

Outlined Collapsible for React

A thick-outlined System Information box that opens to version 2.1.0, status Active, and a last update.

System Information sits in a thick outline, with a chevron. It opens to Version 2.1.0, Status Active, and Last Updated 2 hours ago.

Use it on an about or support panel. If these facts should always show, put them in a Card. In React, Base UI does not remember that the outline was open.

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-md border-2">
  <CollapsibleTrigger className="group flex w-full items-center justify-between p-4 font-medium">
    System Information
    <ChevronDownIcon
      aria-hidden="true"
      className="size-4 transition-transform duration-200 group-aria-expanded:rotate-180"
    />
  </CollapsibleTrigger>
  <CollapsibleContent>
    <div className="border-t-2">
      <div className="flex flex-col gap-2 p-4 text-muted-foreground text-sm">
        {info.map((item) => (
          <div key={item.label}>
            <span className="font-medium">{item.label}:</span> {item.value}
          </div>
        ))}
      </div>
    </div>
  </CollapsibleContent>
</Collapsible>

FAQ

Where does the thick border sit?

Collapsible has rounded-md border-2, and CollapsibleContent has border-t-2, so the divider matches the outline's weight.

How are Version, Status, and Last Updated written?

They come from the info list at the top of the file, in a flex flex-col gap-2 column. Each row is a bold label with a colon, then its value in the muted color.

Does the 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 System Information open?

Set defaultOpen on Collapsible.

It starts closed.

How do I open it from the keyboard?

Tab reaches the trigger, a button named System Information, and Space or Enter shows or hides the rows.

How do I turn the height animation off?

Set disableAnimation on CollapsibleContent, and the rows appear at once. Reduced motion settings already turn it off.

API Reference

Collapsible

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

All 23 collapsible examples