Skip to content

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

Free

Warning Outline Collapsible for Ark UI

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

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 React, Ark UI starts this box closed.

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

Anatomy

Collapsible anatomy: root, trigger, indicator, content

Usage

<Collapsible className="w-full max-w-lg rounded-lg border-2 border-warning/32 bg-warning/4">
  <CollapsibleTrigger className="flex w-full items-center gap-3 p-4">
    <TriangleAlertIcon
      aria-hidden="true"
      className="size-5 shrink-0 text-warning"
    />
    <span className="flex flex-1 flex-col text-start">
      <span className="font-medium">Warning</span>
      <span className="text-muted-foreground text-sm">
        Click to view details
      </span>
    </span>
  </CollapsibleTrigger>
  <CollapsibleContent className="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