Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Collapsible examples · Outline

Outlined Collapsible for React

A box with a thick outline and a System Information header that expands to its version, status and last update.

Framework
UI library

A strong outline for a block of facts. System Information opens to the version, the status and the last update, each a bold label with its value. Use it in about panels, admin screens and support pages.

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 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.

All 23 collapsible examples