Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Collapsible examples · Standard

Simple Collapsible for React

A ghost Toggle button with a chevron that shows and hides a paragraph below it.

Framework
UI library

The simplest collapsible: a ghost Toggle Button with a chevron that turns over, and a paragraph that shows and hides below it. Start here and swap in your own content.

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 do I use my own button as the trigger?

The trigger renders our Button with variant="ghost", so it keeps the button's look and the trigger's behavior. Pass the button as the trigger's render prop.

What does variant ghost change on this button?

It's the transparent button with a hover fill, so the trigger stays quiet next to the content. Any other variant works the same way.

Does the chevron on Toggle rotate?

Yes. The button has the group class and the trigger sets aria-expanded on it while open, so group-aria-expanded:rotate-180 turns the chevron. data-icon="inline-end" spaces it after the label, and aria-hidden keeps the name Toggle.

How do I start the paragraph visible?

Set defaultOpen on Collapsible.

It starts hidden.

What is mt-2 for?

It's on CollapsibleContent, so the paragraph sits a step below the button. The paragraph is text-muted-foreground text-sm.

How do I toggle it from the keyboard?

Tab reaches the trigger, a button named Toggle, and Space or Enter shows or hides the paragraph.

All 23 collapsible examples