Density

Panel

Panel is a native div wrapper for padded flexbox layout surfaces. Use it to group related content, choose a Density layer, and optionally show an outline.

Project summaryThree tasks are ready for review.
import { Panel } from "density-base-ui";

export default function PanelExample() {
  return (
    <Panel aria-label="Project summary" border layer={2} size="lg">
      <strong>Project summary</strong>
      <span>Three tasks are ready for review.</span>
    </Panel>
  );
}

Props

Prop Attribute Values Default
size data-dn-size 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
layer data-dn-level 1, 2, 3, 4, 5, 6, 7 1
border None boolean false
direction None row, column column
children None ReactNode None
Other native div props Mixed HTMLAttributes<HTMLDivElement> None

Size

2xs
xs
sm
md
lg
xl
2xl
3xl
import { Panel } from "density-base-ui";

const sizes = ["2xs", "xs", "sm", "md", "lg", "xl", "2xl", "3xl"] as const;

export default function PanelSizeExample() {
  return (
    <Panel aria-label="Panel sizes">
      {sizes.map((size) => (
        <Panel key={size} border size={size}>
          {size}
        </Panel>
      ))}
    </Panel>
  );
}

Border

When border is true, Panel uses an outline so it does not change the layout size.

Without outline
With outline
import { Panel } from "density-base-ui";

export default function PanelBorderExample() {
  return (
    <Panel aria-label="Panel borders" direction="row">
      <Panel>Without outline</Panel>
      <Panel border>With outline</Panel>
    </Panel>
  );
}

Layer

Layer 1
Layer 2
Layer 3
Layer 4
Layer 5
Layer 6
Layer 7
import { Panel } from "density-base-ui";

const layers = [1, 2, 3, 4, 5, 6, 7] as const;

export default function PanelLayerExample() {
  return (
    <Panel aria-label="Panel layers">
      {layers.map((layer) => (
        <Panel key={layer} border layer={layer}>
          Layer {layer}
        </Panel>
      ))}
    </Panel>
  );
}

Direction

Rowdirection
Columndirection
import { Panel } from "density-base-ui";

export default function PanelDirectionExample() {
  return (
    <Panel aria-label="Panel directions">
      <Panel border direction="row">
        <span>Row</span>
        <span>direction</span>
      </Panel>
      <Panel border direction="column">
        <span>Column</span>
        <span>direction</span>
      </Panel>
    </Panel>
  );
}