Layout & display

Panel

A labeled group inside a page: a heading, an optional description, a row of actions and a body. It takes its surface and its padding from the same contract Card uses, so a panel and a card on one page agree, and it adds a quiet variant for a grouping that needs separation but not a box. Reach for it when a card would put a box inside a box.

Basic

The heading is a real h2 or h3, not a styled div. A page's outline is what a screen reader navigates by, and a div appears in no heading list.

Icon, level and actions

Use headingLevel={2} for a panel sitting directly under the page title and the default 3 for one inside a card or another panel. The icon is decorative and carries no name of its own. Actions sit at the trailing edge of the heading row and wrap under it when the row runs out of width.

Plain

variant="plain" states no surface at all rather than turning the border off, so there is never a second border utility deciding the outcome by the order Tailwind emits it. A plain panel usually takes pad="none" as well: with no box to inset from, padding only pushes the heading out of line with the rest of the page.

Danger

tone="danger" is the surface for a group of destructive actions, such as deleting a workspace. It draws an opaque danger-tinted box with a danger border and puts the heading and its icon in the danger color, while the description stays muted. Reach for it instead of Alert or Banner when the group holds controls: an Alert or a Banner that reports an outcome, a failure or a warning is a live region that reads its content out on every change, and a panel is never one, so it can hold a form. With variant="plain" there is no box and only the heading takes the color, for a danger group inside a card that already draws one.

Padding

Three named steps, and they are independent of the variant so plain is not silently also a padding change. md is the padding a card paints, sm is the compact step for a dense group, and none lets a table or a list run flush to the border.

API