Skip to content

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

Free

Info Box Outline Collapsible for React

An info-tinted Important Notice box with an info icon that opens to a short informational message.

An info-tinted box with an info icon and the title Important Notice. The message opens under a divider in the same color.

Use it for a tip people can skip. If the notice must stay on screen, use an Alert. In React, Base UI does not keep it open after a reload.

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-info/32 bg-info/4">
  <CollapsibleTrigger className="flex w-full items-center gap-3 p-4 font-medium">
    <InfoIcon aria-hidden="true" className="size-5 shrink-0 text-info" />
    Important Notice
  </CollapsibleTrigger>
  <CollapsibleContent>
    <div className="border-info/32 border-t-2 px-4 py-3 text-muted-foreground text-sm">
      This is an informational message that provides additional context and
      details when expanded.
    </div>
  </CollapsibleContent>
</Collapsible>

FAQ

Which classes paint the info box?

Collapsible uses border-2 border-info/32 bg-info/4: a faint tint and a stronger border from the theme's --info color, the same mix as an info Alert. The icon is text-info, so light and dark mode follow the theme.

Does the answer use the same border colors?

Yes. CollapsibleContent has border-t-2 border-info/32, and the message is text-muted-foreground text-sm.

What is inside the trigger?

InfoIcon at size-5 and the Important Notice title, in a flex items-center gap-3 p-4 row that fills the box.

What does a screen reader get from this trigger?

A button named Important Notice that reports whether it's expanded. The icon is aria-hidden.

How do I start the notice open?

Set defaultOpen on Collapsible.

It starts closed.

How do I open the notice from the keyboard?

Tab reaches the trigger, a button named Important Notice, and Space or Enter shows or hides the message.

API Reference

Collapsible

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

All 23 collapsible examples