Question 1

What is the Collapsible?

Accepted Answer

shadcn.io's Collapsible is one section that shows and hides its content: a show-more link, a card with hidden details, an FAQ answer, a sidebar group. It comes with CollapsibleTrigger and CollapsibleContent parts, animates the height as the content opens and closes, and works controlled or uncontrolled. Each example in this gallery is one small file built from those parts.

Question 2

How is a Collapsible different from an Accordion?

Accepted Answer

A Collapsible is one trigger and one region, and each one opens on its own. An Accordion is a set of sections that work as a group: by default one is open at a time, and the arrow keys move between headers. Several collapsibles that should act together are an Accordion.

Question 3

Are these collapsible examples free?

Accepted Answer

Yes. Every example is free to use in personal and commercial projects, with no attribution required. Seeing the code and installing an example takes a free shadcn.io account.

Question 4

When should I use a collapsible instead of a dialog or a popover?

Accepted Answer

A collapsible when the extra content belongs in the page flow and pushes what follows down: details, answers, advanced settings. A popover for a small panel that floats over the page and closes when you click away. A dialog when the content needs the reader's full attention.

Question 5

Which example fits a sidebar with grouped links?

Accepted Answer

The minimal group for a section label over a few links, the counts example for folders with unread numbers, the settings menu for a section with icons, and the nested items for a two-level tree. The links are real anchors, so point them at your pages.

Question 6

How do I build an FAQ question?

Accepted Answer

Wrap the trigger in a heading so the question is in the page outline, put the answer in the content, and add a chevron or a plus that turns while it's open. The FAQ variants show a plain row, a card, a leading icon, a badge and a number.

Question 7

How do I turn the chevron when it opens?

Accepted Answer

The trigger sets aria-expanded while open on every library, so give it the group class and rotate the icon with group-aria-expanded, as most examples do. The chevrons turn 180 degrees, the side-pointing ones 90, and the plus icons 45 to become a cross.

Question 8

How do I install a collapsible example?

Accepted Answer

Sign in with a free account, open the example and run the install command under Installation. The CLI adds the example's file to your project along with the Collapsible component, and Badge or Button when the example uses them.

Question 9

How do I open a collapsible from code?

Accepted Answer

Control it: keep the open state yourself and pass it with a change handler. Each library names these props its own way (open and onOpenChange, isExpanded and onExpandedChange in React Aria, v-model:open in Vue), and the controlled example uses the right ones for the page you're on.

Question 10

Can it start open?

Accepted Answer

Yes. Set the default open prop on the Collapsible (defaultExpanded in React Aria), or start your own state at true when it's controlled, for example from a URL parameter or a saved preference.

Question 11

What are collapsible examples built on?

Accepted Answer

shadcn.io's Collapsible, with Badge and Button in some examples, styled with Tailwind CSS and Lucide icons. In React it's built on Base UI, React Aria, Ark UI or Radix UI, whichever your project uses; the Vue, Svelte and Solid versions are built on Ark UI.

Question 12

Are collapsible examples accessible?

Accepted Answer

Yes. The trigger is a button that reports whether it's expanded and which content it controls, Tab reaches it and Space or Enter toggles it. Decorative icons are hidden from screen readers, and the height animation is skipped for people who ask for reduced motion.

Question 13

Do the examples work with server rendering?

Accepted Answer

Yes. They render on the server closed, unless you start them open, and become interactive in the browser. The controlled example keeps state in the file, so in Next.js it carries the "use client" directive.

Collapsible Examples

Card Collapsible

Card with Badge

Card with Icon Header

Nested Card Content

Subtle Card Collapsible

FAQ Card Style

FAQ Item

FAQ with Badge

FAQ with Icon

Numbered FAQ

Dashed Outline

Info Box Outline

More component examples

Scroll Area

Separator

Accordion

Aspect Ratio

Card

Combobox

Command

Context Menu

Collapsible examples MCP, with Pro

Individual

Team

Organization

Individual

Team

Organization

Frequently asked questions

Every collapsible example. One prompt away.