Density

Panel

When scroll is enabled, scrollAnchor="bottom" starts a transcript at its latest content and follows new content while the user remains there. Set showReturnToBottom to expose a return action after the user scrolls away.

Panel is a native div wrapper for flexbox layout surfaces. Use it to group related content, choose a Density depth, control padding, and optionally show a standard border. Its size and emphasis attributes can also establish Density scopes for size-aware components and interaction primitives in the Panel’s light DOM.

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

export default function PanelExample() {
  return (
    <Panel aria-label="Project summary" border="border" depth="2" size="lg">
      <Skeleton style={{ width: "100%" }} />
    </Panel>
  );
}

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. Its scrubbers are hidden until hover, scrolling, or keyboard focus by default; set scrollbarVisibility="always" to keep them visible.

Scroll
import { Panel, Skeleton, Switch, View } from "density-base-ui";
import { useState } from "react";

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

  return (
    <View>
      <Switch checked={scroll} onCheckedChange={setScroll}>
        Scroll
      </Switch>
      <Panel
        border="border"
        scroll={scroll}
        style={{ height: "10rem", overflow: "hidden" }}
      >
        <View>
          <Skeleton style={{ width: "100%" }} />
          <Skeleton style={{ width: "80%" }} />
          <Skeleton style={{ width: "90%" }} />
          <Skeleton style={{ width: "70%" }} />
          <Skeleton style={{ width: "95%" }} />
          <Skeleton style={{ width: "75%" }} />
          <Skeleton style={{ width: "85%" }} />
          <Skeleton style={{ width: "65%" }} />
        </View>
      </Panel>
    </View>
  );
}

Dismiss control

Set dismissable to show a Close control. Handle onDismiss to remove the Panel from its owner.

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

export default function PanelDismissableExample() {
  return (
    <Panel
      aria-label="Dismissable project summary"
      border="border"
      depth="2"
      dismissable
      onDismiss={() => undefined}
    >
      <Skeleton style={{ width: "12rem" }} />
    </Panel>
  );
}

Size and emphasis scopes

Use a Panel to set shared context for the size-aware components, clickables, and typables it contains. Descendants inherit the Panel’s size and emphasis unless they set their own attribute.

import { Button, Panel, Skeleton } 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-primary" size="xs">
        Explicit xs ghost-primary override
      </Button>
      <Skeleton style={{ width: "100%" }} />
    </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

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

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

Padding

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

export default function PanelPaddingExample() {
  return (
    <Panel aria-label="Panel padding">
      <Panel border="border" padding={false}>
        <Skeleton />
      </Panel>
      <Panel border="border">
        <Skeleton />
      </Panel>
    </Panel>
  );
}

Border

Set border="border" to give the Panel the standard layout-safe Density outline. Set border="none" or omit it for no outline.

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

export default function PanelBorderExample() {
  return (
    <Panel aria-label="Panel borders">
      <Panel>
        <Skeleton />
      </Panel>
      <Panel border="border">
        <Skeleton />
      </Panel>
      <Panel border="none">
        <Skeleton />
      </Panel>
    </Panel>
  );
}

Depth

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

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

Direction

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

export default function PanelOrientationExample() {
  return (
    <Panel aria-label="Panel directions">
      <Panel border="border" orientation="horizontal">
        <Skeleton />
        <Skeleton />
      </Panel>
      <Panel border="border" orientation="vertical">
        <Skeleton />
        <Skeleton />
      </Panel>
    </Panel>
  );
}