A structural panel for settings, grouped content, and page sections.
Panels are broader layout primitives than cards. Use them for page sections, settings groups, and structured content blocks.
Waiting for action
Copy this complete component into a page file. Edit and run it in the Playground.
Loading editor…
Structured page section.
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | — | Heading. |
description | string | — | Subtitle. |
bordered | boolean | true | Outer frame and shadow. Turn off for unframed section layouts. |
divided | boolean | true | Header/body/footer separators. |
density | "comfortable" | "compact" | "comfortable" | Padding scale. |
tone | SurfaceTone | "default" | Accent colour for the frame. |
children | ReactNode | — | Body. |
section with header/footer.