Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Collapsible examples · Card

Subtle Card Collapsible for React

A dashed, muted card with a View source code trigger that expands to a code block.

Framework
UI library

Some content is there for the curious. This quiet card, a dashed border on a muted background, hides a code block behind a View source code trigger with a chevron. Use it under a demo, in docs or anywhere the code is secondary.

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

Which classes make this card quiet?

Collapsible has rounded-lg border-2 border-dashed bg-muted/50: a dashed outline on a muted fill, with no shadow. The code block inside uses bg-background so it stands out from the card.

How is the snippet marked up?

A pre with a code inside, rounded-md bg-background p-3 text-xs. The source is a string at the top of the file, so its line breaks and indentation are kept, and overflow-x-auto scrolls long lines.

Why is justify-between on the trigger?

It keeps View source code at the start and the chevron at the end of the full-width row. 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 snippet visible?

Set defaultOpen on Collapsible.

It starts hidden.

How do I reveal the code from the keyboard?

Tab reaches the trigger, a button named View source code, and Space or Enter shows or hides the code.

How do I show the code without the height animation?

Set disableAnimation on CollapsibleContent, and the code appears and disappears at once. Reduced motion settings already turn the animation off.

All 23 collapsible examples