Density

Panel

Panel is a native div wrapper for flexbox layout surfaces. Use it to group related content, add a compact title, choose a Density depth, control padding, and optionally show an inset border. Its size and emphasis attributes can also establish Density scopes for size-aware and emphasis-aware presentation descendants in the Panel’s light DOM.

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

export default function PanelExample() {
  return (
    <Panel
      aria-label="Project summary"
      border
      depth="2"
      size="lg"
      title="Project summary"
    >
      <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
depth data-dn-depth 1, 2, 3, 4, 5, 6, 7 1
padding data-dn-padding none, 2xs, xs, sm, md, lg, xl, 2xl, 3xl md
scroll None true, false false
border data-dn-border false, true false
orientation Inline style horizontal, vertical vertical
title None ReactNode None
nativeTitle title string None
children None ReactNode None
Other native div props Mixed Omit<HTMLAttributes<HTMLDivElement>, "title"> None

Scrolling

Set scroll when a constrained Panel body should use Density’s ScrollArea instead of a native overflow container. Give the Panel a bounded height through its layout or style.

Build activity
  1. Collected source files
  2. Built component package
  3. Generated documentation
  4. Ran type checks
  5. Verified component tests
  6. Published preview
  7. Updated release notes
  8. Queued deployment
import { Button, Panel } from "density-base-ui";
import { useState } from "react";

const logEntries = [
  "Collected source files",
  "Built component package",
  "Generated documentation",
  "Ran type checks",
  "Verified component tests",
  "Published preview",
  "Updated release notes",
  "Queued deployment",
];

export default function PanelScrollExample() {
  const [scroll, setScroll] = useState(false);

  return (
    <div style={{ display: "grid", gap: "0.75rem", width: "100%" }}>
      <Button
        type="button"
        emphasis="secondary"
        selected={scroll}
        onClick={() => setScroll((isScrolling) => !isScrolling)}
      >
        Scroll {scroll ? "on" : "off"}
      </Button>
      <Panel
        border
        scroll={scroll}
        style={{ height: "10rem", overflow: "hidden" }}
        title="Build activity"
      >
        <ol
          style={{
            display: "grid",
            gap: "var(--dn-size-control-gap)",
            margin: 0,
            paddingLeft: "1.25rem",
          }}
        >
          {logEntries.map((entry) => (
            <li key={entry}>{entry}</li>
          ))}
        </ol>
      </Panel>
    </div>
  );
}

Size and emphasis scopes

Use a Panel to set shared context for the presentations it contains. Descendants inherit the Panel’s size and emphasis unless they set their own attribute.

import { Button, Panel } from "density-base-ui";

export default function PanelScopeExample() {
  return (
    <Panel emphasis="primary" size="lg">
      <Button type="button">Inherited primary button</Button>
      <Button type="button" emphasis="ghost" size="xs">
        Explicit xs ghost override
      </Button>
    </Panel>
  );
}

Scopes apply only within the Panel’s light DOM. They do not cross React portals or Shadow DOM, so popup and overlay content must receive explicit context or be rendered by an overlay component that forwards it.

Size

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

export default function PanelSizeExample() {
  return (
    <Panel aria-label="Panel sizes">
      <Panel border size="2xs">
        2xs
      </Panel>
      <Panel border size="xs">
        xs
      </Panel>
      <Panel border size="sm">
        sm
      </Panel>
      <Panel border size="md">
        md
      </Panel>
      <Panel border size="lg">
        lg
      </Panel>
      <Panel border size="xl">
        xl
      </Panel>
      <Panel border size="2xl">
        2xl
      </Panel>
      <Panel border size="3xl">
        3xl
      </Panel>
    </Panel>
  );
}

Padding

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

export default function PanelPaddingExample() {
  return (
    <Panel aria-label="Panel padding">
      <Panel border padding="none">
        None
      </Panel>
      <Panel border padding="2xs">
        2xs
      </Panel>
      <Panel border padding="xs">
        xs
      </Panel>
      <Panel border padding="sm">
        sm
      </Panel>
      <Panel border padding="md">
        md
      </Panel>
      <Panel border padding="lg">
        lg
      </Panel>
      <Panel border padding="xl">
        xl
      </Panel>
      <Panel border padding="2xl">
        2xl
      </Panel>
      <Panel border padding="3xl">
        3xl
      </Panel>
    </Panel>
  );
}

Border

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

Without border
All sides
Top
Right
Bottom
Left
import { Panel } from "density-base-ui";

export default function PanelBorderExample() {
  return (
    <Panel aria-label="Panel borders">
      <Panel>Without border</Panel>
      <Panel border>All sides</Panel>
      <Panel border="top">Top</Panel>
      <Panel border="right">Right</Panel>
      <Panel border="bottom">Bottom</Panel>
      <Panel border="left">Left</Panel>
    </Panel>
  );
}

Depth

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

export default function PanelDepthExample() {
  return (
    <Panel aria-label="Panel depths">
      <Panel border depth="1">
        Depth 1
      </Panel>
      <Panel border depth="2">
        Depth 2
      </Panel>
      <Panel border depth="3">
        Depth 3
      </Panel>
      <Panel border depth="4">
        Depth 4
      </Panel>
      <Panel border depth="5">
        Depth 5
      </Panel>
      <Panel border depth="6">
        Depth 6
      </Panel>
      <Panel border depth="7">
        Depth 7
      </Panel>
    </Panel>
  );
}

Direction

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

export default function PanelOrientationExample() {
  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>
  );
}