Panel

NbPanel is a surface container that groups related content inside a styled card. It provides a consistent background, border, and spacing out of the box.

<template>
  <NbPanel>
    <p>Simple panel with default styling.</p>
  </NbPanel>
</template>

Nesting content ​

Panels accept any slotted content, including other components.

Depth is derived from nesting ​

A panel inside a panel paints one layer deeper on its own. Nothing names a depth, and the count is clamped at layer 3.

Use the layer prop, or a .nb-layer-{0-3} class, only to pin or reset a level. See Theming, Layers for when that is worth doing.

<NbPanel :layer="0" />

As a footer action bar ​

Panels are commonly used as a container for modal or form action buttons, keeping them visually separated from the main content.

<template>
  <NbPanel>
    <NbGrid dir="row" gap="sm" justify="end">
      <NbButton variant="ghost">Cancel</NbButton>
      <NbButton variant="primary">Save</NbButton>
    </NbGrid>
  </NbPanel>
</template>

Slots ​

Props ​

Beyond the layer it paints, NbPanel is a layout container. Use CSS custom properties or inline styles to customize appearance.