Skip to content

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

Free

Info Box Outline Collapsible for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not keep it open after a reload.

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-info/32 bg-info/4">
  <CollapsibleTrigger class="flex w-full items-center gap-3 p-4 font-medium">
    <InfoIcon aria-hidden="true" class="size-5 shrink-0 text-info" />Important Notice
  </CollapsibleTrigger>
  <CollapsibleContent class="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.
  </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