Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Warning Outline Collapsible for Solid

A warning-tinted Warning box with an alert icon and a Click to view details line that opens the warning.

UI library: Ark UI

A warning-tinted box with an alert icon, the title Warning, and a muted Click to view details line. The details open under a matching divider.

Use it before a risky setting people can choose to read. If they must see it, use an Alert and leave it open. In Solid, Ark UI starts this box closed.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

Collapsible anatomy: root, trigger, indicator, content

Usage

<Collapsible class="w-full max-w-lg rounded-lg border-2 border-warning/32 bg-warning/4">
    <CollapsibleTrigger class="flex w-full items-center gap-3 p-4">
      <TriangleAlertIcon aria-hidden="true" class="size-5 shrink-0 text-warning" />
      <span class="flex flex-1 flex-col text-start">
        <span class="font-medium">Warning</span>
        <span class="text-muted-foreground text-sm">
          Click to view details
        </span>
      </span>
    </CollapsibleTrigger>
    <CollapsibleContent class="border-warning/32 border-t-2 px-4 py-3 text-muted-foreground text-sm">
      This action may have unintended consequences. Please review the
      documentation before proceeding.
    </CollapsibleContent>
  </Collapsible>

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.

API Reference

Collapsible

No extra props in this demo. The rest is on the Collapsible page.

All 23 collapsible examples