Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Collapsible examples · Outline

Warning Outline Collapsible for React

A warning-tinted box with a warning icon, a title and a hint line that expands to the details.

Framework
UI library

A warning that asks for a closer look. The box is tinted and outlined with the theme's warning color, the trigger shows a warning icon, the title Warning and a muted hint, and the details open under a divider. Use it before risky actions or next to settings with side effects.

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 paint the warning box?

Collapsible uses border-2 border-warning/32 bg-warning/4: a faint tint and a stronger border from the theme's --warning color, the same mix as a warning Alert. The icon is text-warning.

Where does Click to view details come from?

It's the second line of the trigger, text-muted-foreground text-sm under the Warning title, in a flex-1 column beside the icon.

Does the answer keep the warning border?

Yes. CollapsibleContent has border-t-2 border-warning/32, and the details are text-muted-foreground text-sm.

What is the trigger's accessible name?

Warning Click to view details: both lines are inside the trigger. TriangleAlertIcon is aria-hidden, since the title already says Warning.

How do I start the warning open?

Set defaultOpen on Collapsible.

It starts closed.

How do I open the warning from the keyboard?

Tab reaches the trigger, a button named Warning Click to view details, and Space or Enter shows or hides the details.

All 23 collapsible examples