Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Collapsible examples · Outline

Info Box Outline Collapsible for React

An info-tinted box with an info icon and an Important Notice header that expands to the message.

Framework
UI library

A notice that stays short until someone wants the details. The box is tinted and outlined with the theme's info color, the trigger pairs an info icon with Important Notice, and the message opens under a divider in the same color. Use it for context, tips and announcements.

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 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.

All 23 collapsible examples